使用ZURB Reveal Modal插件控制Youtube视频

Question

我正试图找出用ZURB Reveal Modal插件实现嵌入式Youtube视频的最佳方法。

到目前为止，我有以下功能，可以在使用".modal close"关闭模式窗口时暂停视频。然而，当单击".modale bg"时，它不起作用：（知道为什么吗？同样，我想在视频播放完成后关闭模式窗口。

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
      events: {
        'onReady': onPlayerReady
      }
    });
}
function onPlayerReady(event) {
    $(".modal-close, .modal-bg").on('click', function() {
        player.stopVideo();
    });
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

我在这里架起了一把小提琴：http://jsfiddle.net/M53GQ/8/

谢谢！

Answer 1

第一个问题可以通过jQuery处理事件委派的方式来解决。基本上，因为类为.modal-bg的元素是在绑定发生后创建的，所以它不会触发停止视频的调用。相反，您应该在文档主体上使用委托函数，这样，当单击事件出现气泡时，即使对于在初始绑定之后创建的元素，它也可以检测到正确的类匹配。换句话说，将onPlayerReady函数更改为如下所示：

function onPlayerReady(event) {
    $("body").delegate('.modal-close,.modal-bg','click', function() {
        player.stopVideo();
    });
}

要在视频完成后关闭模态，您需要为播放器设置一个onStateChange处理程序。首先，在创建YT.Player对象时，将其添加到events参数中：

'onStateChange': onPlayerStateChange

然后定义回调：

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      // close your modal here
    }
  }