Question

是否可以自动在页面加载时使用Youtube视频启动Fancybox并在视频结束时自动关闭？（一种介绍）

Answer 1

是的，这是可能的。以fancybox website（提示和技巧No.15）为例，并根据您的需要进行调整。

首先，你需要加载youtube播放器API（当然除了jQuery和fancybox js和css文件之外）

<script src="http://www.youtube.com/player_api"></script>

然后使用其中的fancybox自定义脚本构建onYouTubePlayerAPIReady()函数以启动视频。

然后，在fancybox beforeShow回调中，为视频结尾设置一个监听器，并使用方法$.fancybox.close()关闭fancybox，如：

function onYouTubePlayerAPIReady() {
    $(document).ready(function () {
        $.fancybox({
            href: "http://www.youtube.com/embed/L9szn1QQfas?enablejsapi=1&wmode=opaque&autoplay=1",
            type: "iframe",
            beforeShow: function () {
                // Find the iframe ID
                var id = $.fancybox.inner.find('iframe').attr('id');
                // Create video player object and add event listeners
                var player = new YT.Player(id, {
                    events: {
                        'onStateChange': function (event) {
                            if (event.data === 0) {
                                $.fancybox.close();
                            } // if
                        } // onStateChange
                    } // events
                }); // YT.Player
            } // beforeShow
        }); // fancybox
    }); // ready
} // onYouTubePlayerAPIReady

参见 JSFIDDLE

是否可以在页面加载时使用youtube视频自动启动Fancybox并自动关闭？

1 个答案: