使用 Javascript 关闭（隐藏）div 时停止 YouTube 视频播放答案

【问题标题】：Stop YouTube video playing when div is closed (hidden) with Javascript使用 Javascript 关闭（隐藏）div 时停止 YouTube 视频播放
【发布时间】：2018-05-27 05:25:53
【问题描述】：

我有一个基本的叠加层，当点击特定链接时，内容会显示在页面顶部。这很好用，但我刚刚添加了一个 YouTube 视频嵌入，并意识到当覆盖层关闭时，声音会在后台播放。所以我需要找到一种方法来停止或暂停视频。我继承了代码，这里是：

$('#size-guide a').click(function(e){
    e.stopPropagation(); e.preventDefault();
    $('.sizeguide-popup-container').addClass('reveal');
    $('html,body').addClass('noscroll');
    $("header.mainHeader").css("position", "absolute").css("z-index", "100");
});

$(document).on("click", ".sizeguide-popup-close", function() {
    $(".sizeguide-popup-container").removeClass('reveal');
    $('html,body').removeClass('noscroll');
    $("header.mainHeader").css("position", "fixed").css("z-index", "9999999");
});

$('.sizeguide-popup-container').on('click', function(e) {
  if (e.target !== this)
    return;
  $('.sizeguide-popup-container').removeClass('reveal');
  $('html,body').removeClass('noscroll');
  $("header.mainHeader").css("position", "fixed").css("z-index", "9999999");
});

我想这只是我需要修改的第二个块，但到目前为止我所尝试的并没有成功。视频会自动包装在 rte__video-wrapper div 中，以使其具有响应性。所以我想我可以将其修改为以下内容（在阅读了另一个帖子之后）：

$(document).on("click", ".sizeguide-popup-close", function() {
    $(".sizeguide-popup-container").removeClass('reveal');
    $('html,body').removeClass('noscroll');
    $("header.mainHeader").css("position", "fixed").css("z-index", "9999999");
    $(".rte__video-wrapper iframe").attr('src','');
});

因为这实际上只是删除了视频链接，所以当重新打开覆盖时会有一个很大的空白区域。有人指出我正确的方向吗？

【问题讨论】：

标签： javascript jquery video youtube youtube-api

【解决方案1】：

根据 iframe API，您可以使用 player.stopVideo() 停止 youtube 视频。

player.stopVideo():Void 停止并取消当前视频的加载。此功能应保留在极少数情况下，当您知道用户不会在播放器。如果您的意图是暂停视频，则只需致电暂停视频功能。如果你想改变播放器的视频正在播放，可以调用其中一个排队函数而不调用先停止视频。

您还可以查看此SO post 以获取更多代码参考。

【讨论】：