灯箱关闭后，羽毛灯箱中的 Youtube iframe 视频继续播放答案

【问题标题】：Youtube iframe video in featherlight lightbox continues to play after lightbox closes灯箱关闭后，羽毛灯箱中的 Youtube iframe 视频继续播放
【发布时间】：2017-09-22 21:48:27
【问题描述】：

我正在构建我的第一个网页之一，并且对于任何自定义 html、js、css 等都是非常新手。我正在 Squarespace 中基于 Alex 模板构建站点。我的目标是拥有一个从文本链接打开并播放 youtbe 视频的灯箱。目前，我可以获得文本链接来打开灯箱（featherlight）并播放 youtube 视频（iframe 嵌入），但后来我遇到了 2 个问题。 1.视频的音频播放两次 2.当我关闭灯箱时，一组音频一直在播放。

我在这里完全迷失了，并试图找到解决方案。这是我所拥有的：

<a id='open_lightbox' data-featherlight='.lightbox_content' href='#'>open lightbox</a>
<div style="display:none;">
<div class='lightbox_content'id=ytplayer>
    <iframe id="video1" width="1280" height="720" src="https://www.youtube.com/embed/g7fbe-oV-X0?rel=0&enablejsapi=1&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
<script>
 $("#open_lightbox").click(function(){
  $("#video1")[0].src += "&autoplay=1";
  ev.preventDefault();
 });
</script>
</div>
</div>

其中很多内容来自不同的帖子，但我没有找到任何有效的方法。这是我解决的最后一个让视频播放的问题，但我不知道如何停止它，或者为什么有两个音频实例正在运行。任何帮助表示赞赏。

【问题讨论】：

标签： javascript jquery html iframe youtube

【解决方案1】：

试试这个：

$('.#open_lightbox').on('click', function(ev) {
    setTimeout(function() {
        $("#video1")[0].src += "&autoplay=1";
        },150);

    //ev.preventDefault();
});

你以前的工作方式 - 我只需要再次使用这个技巧并面临同样的问题。添加一个小的延迟并删除 preventDefault() 对我有用。

您可能需要为“#video1”放置一个更具体的 jQuery 选择器，这样它就不会自动播放两个视频。

【讨论】：