Stop iframe video from playing when exiting modal window

Question

I am having trouble figuring out how to stop a iframe video from playing when I close the modal window. I have seen a lot of answers mention YouTube and using their API but these videos are not from YouTube. I have seen some questions already asked on this subject, ex: Stop all playing iframe videos on click a link javascript. I just don't really understand how to incorporate this into my code.

Question

How can I stop a iframe video from playing when the user closes the modal window. To close each modal window, I use <div class=close-animatedModal>.

If it matters, I am using Wordpress.

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

I am using animate.modal.js for the modal animation

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

rather then using static HTML for modal windows try to create dynamic and remove that HTML from the modal window on close. This way you will be able to minimize code in single function by passing video URL to function and reuse that for open any no of video. because due to security reason you want be able to access any content of iframe. — Rohit Harkhani, Aug 05 '15 at 16:31

Praveen Kumar Purushothaman · Accepted Answer · 2015-08-05T16:31:50.950

1

Add this to your script, in the document ready function:

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

edited Aug 05 '15 at 16:31

answered Aug 05 '15 at 15:28

Praveen Kumar Purushothaman

164,888
24
203
252

Thanks for the reply, I changed the code but the function is still not working. I am getting this error in the console, "Uncaught Error: Syntax error, unrecognized expression: //fast.wistia.net/embed/iframe/rnx2undr9h". I update the link to the live site with a test page [http://johnmartinagency.com/test-page-2/](http://johnmartinagency.com/test-page-2/) – AndrewH Aug 05 '15 at 15:47
Sure @AndrewH I am looking into it. – Praveen Kumar Purushothaman Aug 05 '15 at 16:17
@AndrewH Where's the event handler for `.close-animatedModal`? – Praveen Kumar Purushothaman Aug 05 '15 at 16:19
The event handler that closes the modal is done in animatedModal.min.js. You can see a quick view here - https://jsfiddle.net/hajozoox/ – AndrewH Aug 05 '15 at 16:28
That's fine. So you haven't added another event handler to override this, is it. So lemme give you an updated quick answer for you. – Praveen Kumar Purushothaman Aug 05 '15 at 16:29
Thank you for updating your answer. Would I be including this in the the animatedModal.min.js file? I don't really understand where that would be in the present file - https://jsfiddle.net/hajozoox/1/ – AndrewH Aug 05 '15 at 16:57
No no... Put this in your HTML document. – Praveen Kumar Purushothaman Aug 05 '15 at 16:58

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

This solution seems to be working.

Add this JS after you have loaded the above script (just before the closing body tag)

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

Accepted Answer is here

edited May 23 '17 at 11:58

Community

1
1

answered Aug 05 '15 at 17:20

Bhavin Solanki

4,740
3
26
46

Stop iframe video from playing when exiting modal window

2 Answers2