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

Stop iframe video from playing when exiting modal window

本文关键字：播放 iframe 视频 退出 模态 窗口      更新时间：2023-09-26

当我关闭模态窗口时，我很难弄清楚如何阻止iframe视频播放。我看到很多答案提到YouTube和使用他们的API，但这些视频不是来自YouTube。我已经看到了一些关于这个主题的问题，例如:停止所有播放iframe视频，点击链接javascript。我只是真的不明白如何把它合并到我的代码中。

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

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

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

<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

我使用的是animation .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>

将此添加到脚本中，在document ready函数中:

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

这个解决方案似乎有效。

在你加载了上面的脚本之后添加这个JS(就在结束body标签之前)

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

相关文章：