当youtube视频id完成时，如何使fancybox自动关闭？

如何在youtube视频结束时自动关闭fancybox？

这并不像听起来那么简单：

• 首先确定是使用嵌入式播放器还是iframe播放器
• 按照或示例初始化API
• 弹出窗口打开后，使用功能设置播放器
• 在回调中，确保添加一个

  onStateChange

  事件侦听器，以便确定视频何时完成（值为零表示视频已结束）
• 一旦发现视频已结束，请使用

  $.fancybox.close

  方法关闭弹出窗口

---

或者，您可以让用户关闭弹出窗口。

在没有任何运气的情况下四处查看后，我想出了一个解决方案

看看我们在做什么，在这里看视频

<div style="display: none;">  
<div id="player"></div>
</div>  

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

    <script>

        $(document).ready(function () {
              $("a.video_button").fancybox({
                        'titlePosition'     : 'inside',
                        'transitionIn'      : 'none',
                        'transitionOut'     : 'none'
                    });
        });         


        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              height: '390',
              width: '640',
              videoId: 's19V_6Ay4No',
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
        }


        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
              $(document).ready(function () { parent.$.fancybox.close();});
            }
        }

    </script>  

$（文档）.ready（函数（）{
$（“a.video_按钮”）.fancybox({
“标题位置”：“内部”，
“transitionIn”：“无”，
“transitionOut”：“无”
});
});         
//创建youtube播放器
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'s19V_6Ay4No'，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
//自动播放视频
函数onPlayerReady（事件）{
}
//视频结束时
函数onPlayerStateChange（事件）{
如果（event.data==0）{
$（document）.ready（函数（）{parent.$.fancybox.close（）；}）；
}
}

是的，这是处理fancybox或colorbox的正确方法。Youtube视频API提供了不同的状态来处理此问题，如未开始=-1、结束=0、播放=1、暂停=2、缓冲=3、视频提示=5

---

在fancybox jquery代码块中获取或跟踪这种状态可以很容易地实现。只需通过适当的演示访问本文。

这是Fancybox Youtube Cookie Autoclose Autopopup的完整脚本。只需下载css中所需的图像，将其放入根目录中的/Fancybox文件夹中，并替换为视频id。真正经过充分测试的工作方式

//检测移动设备功能
var isTouchSupported='ontouchstart'在窗口中，
isTouchSupportedIE10=navigator.userAgent.match（/Touch/i）！=无效的
函数onPlayerReady（事件）{
如果（！（isTouchSupported | | isTouchSupportedIE10））{
//这不是一个移动设备，所以自动播放
event.target.playVideo（）；
}
}
函数onPlayerStateChange（事件）{
如果（event.data==0）{
$.fancybox.close（）；
}
}
函数onYouTubePlayerAPIReady（）{
$（函数（）{
如果（$.cookie（'welcome_video'））{
//还不到三天
}否则{
//将cookie设置为3天后过期
$.cookie（'welcome_video'，'true'，{expires:3}）；
$（文档）.ready（函数（）{
$.fancybox.open({
href:“https://www.youtube.com/embed/qm1RjPM9E-g“，/*您的视频ID”*/
助手：{
媒体：{
youtube：{
参数：{
自动播放：1，
rel:0，
//控件：0，
showinfo:0，
自动隐藏：1，
}
}
},
按钮：{}
},
beforeShow:函数（）{
var id=$.fancybox.inner.find（'iframe'）.attr（'id'）；
var玩家=新的YT玩家（id{
活动：{
onReady:onPlayerReady，
onStateChange:onPlayerStateChange
}
});
}
})；//fancybox
})；//准备好了吗
}//还有别的吗
})；//用于cookie的函数
}//youtube API就绪

您应该包括解决方案，并参考您找到此信息的网站。此外，短代码在此处不是有效的方法，因为标记会处理它。这是可以与fancybox代码一起使用的YouTube视频API链接-您可以在上面的API页面中搜索函数-函数名称-函数onYouTubePlayerReady（playerId）访问以获得完整的代码块实现-