javascript - 当使用 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");
});

我想这只是我需要修改的第二个 block ，但到目前为止我所尝试的还没有成功。视频自动包装在 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 Stops and cancels loading of the current video. This function should be reserved for rare situations when you know that the user will not be watching additional video in the player. If your intent is to pause the video, you should just call the pauseVideo function. If you want to change the video that the player is playing, you can call one of the queueing functions without calling stopVideo first.

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