Остановить видео, когда модал закрыт

Question

Я пытаюсь помешать воспроизвести видео в модалах, когда они были закрыты. Проблема в том, что мой модальный скрипт перемещает модальное с исходного места непосредственно перед закрытием </body> тег. Поэтому, если технически остановить скрипт видео над модальным окном, видео никогда не перестанет воспроизводиться после закрытия модального окна.

Вот модальный скрипт, который я использую https://github.com/VodkaBears/Remodal

JQUERY ОСТАНОВИТЬ ВИДЕО

  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>

Answer 1

Нажмите кнопку на Video stop button чтобы остановить это, когда modal-close-button нажата. Это всего лишь пример, так что настройте по мере необходимости.

$("#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>

Answer 2

Я думаю, что у вас есть проблемы с остановкой видео, потому что оно работает в iframe. Вы можете попробовать это (обратите внимание, что я использую тег iframe вместо тега embed):

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>

Мой ответ вдохновлен ответом Роба В.

Вы можете найти больше информации о событиях remodal.js на их странице Github.