Stop video when modal is closed

问题

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>

回答1:

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>

回答2:

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

来源：https://stackoverflow.com/questions/37618279/stop-video-when-modal-is-closed