嵌入式 YouTube 视频在封闭容器中继续播放

Question

我制作了一个灯箱，一个 window 通过单击 jquery 上的元素打开。
在图片上效果很好，但如果我打开 YouTube 视频并播放它，在关闭 window（显示：none）后，视频继续在后台播放..
我用 this tutorial 作为灯箱。
YouTube 视频作为 iframe 嵌入。

关闭window


    $(".js-modal-close, .modal-overlay").click(function() {
      $(".modal-box, .modal-overlay").fadeOut(500, function() {
        $(".modal-overlay").remove();
      });
    });

我该如何解决我的问题？

Answer 1

第 1 步。使用 enablejsapi=1 启用 iframe API 并向 iframe 添加 id：

<iframe id="player" src="https://www.youtube.com/embed/MxMBueIjtv0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

第 2 步。加载 API 并使用第 1 步中的 ID 创建播放器。对于此演示，我使用 player（可能是一个错误的选择）：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
  /* probably should tie into the `onReady` event,
     but for this demo's purpose it's unnecessary.
     the video will probably be ready by the time
     you get to the close button. */
  player = new YT.Player('player');
}

第 3 步。在关闭模型代码段中调用 stopVideo 函数：

$(".js-modal-close, .modal-overlay").click(function() {
  player.stopVideo(); /* you can optionally also set the video back
                         at the beginning with `player.seekTo(0);` */
  $(".modal-box, .modal-overlay").fadeOut(500, function() {
    $(".modal-overlay").remove();
  });
});

文档：https://developers.google.com/youtube/iframe_api_reference
演示：http://jsfiddle.net/4f5dksj5/

嵌入式 YouTube 视频在封闭容器中继续播放

Embedded YouTube video keep playing on closed container

html

javascript

css

youtube

jquery