前几天，在做一个站时，需要弹出层播放 YouTube 视频。网站采用 jQuery，并使用 Layer[1] 做弹层。需要显示 YouTube 的视频，从简使用 YouTube 简单的 IFrame Player API[2] 调用视频。
JS 代码段如下：
function onPlayerReady(event) {
event.target.playVideo();
}
var player;
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['800px', '450px'],
content: '<div id="player"></div>',
shadeClose: true,
skin: 'layer-video',
success: function(){
player = new YT.Player('player', {
height: '450',
width: '800',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
}
});
}
});
网页使用中出现个小问题，就是弹层中的 YouTube 视频全屏后看不到了。实际上它是已经有执行全屏操作的，理所当然想到 CSS 的定位问题。我记得之前使用自己写的弹层并播放腾讯视频全屏没问题，问题可能在于 Layer。
我在 YouTube API 文档里找不到全屏的相关 event，后来发现直接监听网页的全屏事件即可，具体可以看 Fullscreen API[3]。我的想法是监听全屏，当有全屏时操作 DOM，让视频能显示出来。
调试来调试去心好累，搞得都想放弃 Layer，直接为这视频写个简单的弹出层。后来灵机一动，直接把弹层的主容器作为 YouTube API 操作的容器。也即：
function onPlayerReady(event) {
event.target.playVideo();
}
var player;
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['800px', '450px'],
shadeClose: true,
skin: 'layer-video',
success: function(){
var playerId = $('.layer-video').attr('id');
player = new YT.Player(playerId, {
height: '450',
width: '800',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
}
});
}
});
问题解决。
参考资料
本文历史
- 2017 年 09 月 06 日 完成初稿