Question

我有一个网站，该网站的内容带有弹出式链接。该模型有两个视频，实际上会弹出自己的模态。

此处的网址： falconcropprotection.com

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

将弹出一个模型。顶部右侧是第一个视频。点击该视频。另一个模式打开了。关闭该模型。现在向下滚动并单击第二个视频，它也会弹出一个模态。两者都很好。继续并关闭该弹出窗口。

现在返回第一个视频，然后单击该视频。弹出模式，但现在视频丢失。我注意到的是，该第一个iframe的网址在关闭后似乎已删除。第二个则不会发生。

这是我的剧本。我确定这是我做错了。我正在使用此脚本，以便在任何人在视频完成之前关闭模态时，它将杀死视频。否则，您仍然会听到音频，而我则不需要。

<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>

任何帮助将不胜感激。

具有两个模态的两个视频

0 个答案: