1

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

4

1 回答 1

2

是的，这是可能的。以fancybox 网站上的示例（提示与技巧No.15）为例，根据您的需要对其进行调整。

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

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

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

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

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

于 2013-06-19T05:06:30.717 回答