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

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();
    });
  });
});