退出模式窗口时停止播放 iframe 视频答案

【问题标题】：Stop iframe video from playing when exiting modal window退出模式窗口时停止播放 iframe 视频
【发布时间】：2023-04-07 19:19:01
【问题描述】：

当我关闭模态窗口时，我无法弄清楚如何停止播放 iframe 视频。我看到很多答案提到 YouTube 并使用他们的 API，但这些视频不是来自 YouTube。我已经看到一些关于这个主题的问题，例如：Stop all playing iframe videos on click a link javascript。我只是不太明白如何将其合并到我的代码中。

问题

当用户关闭模态窗口时，如何停止播放 iframe 视频。要关闭每个模态窗口，我使用<div class=close-animatedModal>。

如果重要的话，我正在使用 Wordpress。

测试页 - http://johnmartinagency.com/test-page-2/

HTML

<a id=demo01 href=#animatedModal> <!-- This targets the specific modal -->
       <div class=play-container><div class=play-button></div>
       </div>
    </a>

<div class="mdl-card__title auto-insurance"> <!-- Google Material Design Lite Card -->
     <h2 class=mdl-card__title-text>Auto Insurance Made Easy</h2>

</div>
<div class="mdl-card__actions mdl-card--border"> <a id=demo01-a href=#animatedModal class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Watch Video</a> <!-- The play button -->

</div>
<div class=video-length>(5:21)</div>
</div>
<div id=animatedModal> <!-- The Modal Container -->
    <div class=modal__box>
        <div class=close-animatedModal> <!-- Close modal ->>
           <i class="fa fa-times fa-2x close-icon"></i>
        </div>
        <div class=h_iframe> <!-- The iframe -->
            <img class=ratio src=http://placehold.it/16x9>
            <iframe src="//fast.wistia.net/embed/iframe/rnx2undr9h?videoFoam=true" allowtransparency=true frameborder=0 scrolling=no class=wistia_embed name=wistia_embed allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen align=center></iframe>
            <script src=//fast.wistia.net/assets/external/E-v1.js></script>
        </div>
    </div>
</div>
</div>

Javascript

我在模态动画中使用animate.modal.js

<script src=//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>    </script>
<script src="http://sogomarketingagency.com/wp-content/themes/Avada-Child-Theme/js/animatedModal.min.js?ver=4.1.1"></script>
<script>
$("#demo01, #demo01-a").animatedModal ({
  modalTarget:"animatedModal",
  animatedIn:"zoomIn",
  animatedOut:"bounceOut",
  color:"rgba(0, 0, 0, 0.95)",
  overflow:"scroll"})
</script>

【问题讨论】：

而是使用静态 HTML 用于模态窗口尝试创建动态 HTML 并在关闭时从模态窗口中删除该 HTML。这样，您将能够通过将视频 URL 传递给函数并重用该 URL 来打开任何视频，从而最小化单个函数中的代码。因为出于安全原因，您希望能够访问 iframe 的任何内容。

标签： javascript jquery iframe

【解决方案1】：

将此添加到您的脚本中，在 document 就绪函数中：

jQuery(function () {
  jQuery().on("click", function () {
    jQuery('iframe').contents().find('video').each(function () {
      this.currentTime = 0;
      this.pause();
    });
  });
});

【讨论】：

感谢回复，我改了代码，但功能还是不行。我在控制台中收到此错误，“未捕获的错误：语法错误，无法识别的表达式：//fast.wistia.net/embed/iframe/rnx2undr9h”。我使用测试页面http://johnmartinagency.com/test-page-2/ 更新了指向实时站点的链接
当然@AndrewH 我正在调查它。
@AndrewH .close-animatedModal 的事件处理程序在哪里？
关闭模态的事件处理程序在animatedModal.min.js中完成。您可以在这里快速查看 - jsfiddle.net/hajozoox
没关系。所以你还没有添加另一个事件处理程序来覆盖它，是吗。所以让我给你一个更新的快速答案。

【解决方案2】：

这个解决方案似乎奏效了。

在你加载了上面的脚本之后添加这个 JS（就在结束 body 标记之前）

<script type="text/javascript">
    $('#myModal').on('hidden.bs.modal', function () {
        var videos = $('#video');
        video.pause()
    });
</script>

Accepted Answer is here

【讨论】：