Stop video when modal is closed

Question

I'm trying to stop videos in modals from playing when they have been closed. The problem is that my modal script moves the modal from its original place to just before the closing </body> tag. So with stop video script technically above the modal window the video never stop playing after modal is closed.

Here's the modal script i use https://github.com/VodkaBears/Remodal

JQUERY TO STOP VIDEO

  var stopVideo = function ( element ) {
      var video = element.querySelector( 'video' ); // script stops here with this error message: (index):684 Uncaught TypeError: Cannot read property 'querySelector' of null.
      if ( video !== null ) {
          video.stop();
      }
  };

  $('.remodal-close').click(function(){
    var id = this.id || this.getAttribute( 'data-remodal-id' );
    var modal = document.querySelector( id );
    //closePopup();
    console.log("has video stopped? 1"); 
    stopVideo( modal );
    console.log("has video stopped? 2"); 
  });

HTML FOR MODAL

<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
    <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
      <div class="video-container clearfix">
          <div class="video clearfix">
              <embed width="200" height="113" src="https://www.youtube.com/embed/xxxxxxxx?autoplay=1" frameborder="0" allowfullscreen>         
          </div>
      </div>
</div>

score 1 · Answer 1 · answered Jun 03 '16 at 16:21

Trigger a click on the Video stop button to stop it when the modal-close-button is clicked. This is just an example, so adjust as necessary.

$("#modal-close-button").click(function () {
  
  $("#video-stop-button").click(); 
  
  });


$("#video-stop-button").click(function () {
  
alert("The video should stop as the modal closes because a click on the close button will trigger the stop button ");
  
  });

div {
  
  cursor: pointer;
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>






<div id="modal-close-button"> Modal close button</div>

<div id="video-stop-button"></div>

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

My guess is that you have troubles stopping the video because it's running in an iframe. You could try this (note that I'm using the iframe tag instead of the embed tag):

http://jsfiddle.net/sb6rtxaz/

function toggleVideo(e, state) {
  var div = $(e.target)[0];
  var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
  div.style.display = state == 'hide' ? 'none' : '';
  func = state == 'hide' ? 'pauseVideo' : 'playVideo';
  iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}

$(document).on('opening', '.remodal', function(e) {
  toggleVideo(e);
});

$(document).on('closing', '.remodal', function(e) {
  toggleVideo(e, 'hide');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.7/remodal.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.7/remodal-default-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.0.7/remodal.min.js"></script>


<a href="#modal">Call the modal with data-remodal-id="modal"</a>

<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
  <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
  <div class="video-container clearfix">
    <div class="video clearfix">
      <iframe width="500" height="315" src="http://www.youtube.com/embed/i1EG-MKy4so?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

My answer ist inspired by an answer from Rob W

You can find more information about the remodal.js events on their Github Page

Stop video when modal is closed

2 Answers2

Linked