Question

当我关闭模态窗口时，我无法弄清楚如何停止播放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>

Answer 1

在document就绪功能

中将其添加到您的脚本中

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

Answer 2

这个解决方案似乎有效。

在加载上述脚本（就在关闭正文标记之前）

之后添加此JS

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

Accepted Answer is here

退出模态窗口时停止播放iframe视频

2 个答案: