jquery - 带有两个模态的两个视频

Question

我有一个网站，其中包含一个弹出模式的链接。该模型有两个视频，实际上弹出了自己的模态。

这是网址：falconcropprotection.com

从顶部菜单中，单击案例研究。它将向下滚动案例研究。选择左边第一个名为 Fawnridge Winery and Vineyards 的。

将弹出一个模型。右上角是第一个视频。点击那个视频。另一个模式打开了。关闭该模型。现在向下滚动一点并单击第二个视频，它也会弹出一个模态。两者都工作正常。继续并关闭该弹出窗口。

现在回到第一个视频并单击它。模式弹出，但现在视频丢失了。我注意到的是第一个 iframe 的 URL 在关闭后似乎被删除了。第二个不会发生这种情况。

这是我的脚本。我确定这是我做错了什么。我正在使用这个脚本，这样如果有人在视频完成之前关闭模式，它就会终止视频。否则你仍然会听到音频，我不希望这样。

<script>
  $('.close-modal-1').click(function(e) {
    e.preventDefault();
    $('.video-embed').children('iframe').attr('src', '');
  });
</script>
<script>
  $('.close-modal-2').click(function(e) {
    e.preventDefault();
    $('.video-embed-2').children('iframe').attr('src', '');
  });
</script>

这是我的两个视频按钮的 html：

<button class="imagebtn" data-toggle="modal" href="#CaseStudy77YT">
<img alt="" src="/news/images/content/youtube-thumb.jpg" /></button>

<button class="imagebtn" data-toggle="modal" href="#CaseStudy77YT2">
<img alt="" src="/news/images/content/youtube-thumb-2.jpg" /></button>

这是两种模式的 HTML：

<div id="CaseStudy77YT" class="modal fade" tabindex="-1" data-focus-on="input:first" style="margin:50px auto auto; max-width:960px; max-height:680px;background :#f9f9f9;">
     <div class="modal-header">
        <button type="button" data-dismiss="modal" class="btn close close-modal-1">Close</button>

        <h3>Good Morning Sacramento</h3>
    </div>
    <div class="modal-body video-embed">
        <iframe width="910" height="510" src="https://www.youtube-nocookie.com/embed/T9W3SEo0za4?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>         </div>
</div>

<div id="CaseStudy77YT2" class="modal fade" tabindex="-1" data-focus-on="input:first" style="margin:50px auto auto; max-width:960px; max-height:680px;background :#f9f9f9;">
     <div class="modal-header">
        <button type="button" data-dismiss="modal" class="btn close close-modal2">Close</button>

        <h3>FrightKite Over Golden Gate Field</h3>
    </div>
    <div class="modal-body video-embed-2">
        <iframe width="910" height="510" src="https://www.youtube-nocookie.com/embed/FG9fgVVGoe0?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>         </div>
</div>

任何帮助，将不胜感激。

标签： jquerymodal-dialog