使用JavaScript关闭DIV(隐藏)时停止YouTube视频播放

Question

我有一个基本覆盖层，当在页面顶部显示特定的链接时，单击特定链接。这很好，但是我刚刚添加了一个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','');
});

本质上只是删除了视频链接，因此当重新打开覆盖层时，有一个很大的空白空间。有人指向正确的方向？

Answer 1

根据iFrame API，您可以使用player.stopvideo（）。

停止YouTube视频。

player.stopvideo（）：void 停止并取消当前视频的加载。当您 知道用户不会在 球员。如果您的目的是暂停视频，则应致电 pavevideo函数。如果您想更改播放器的视频 在播放，您可以在不打电话的情况下调用一个排队功能之一 首先。

您也可以检查此信息以获取其他代码参考。