Stoppen Sie das Video, wenn Modal geschlossen ist

Question

Ich versuche, Videos in Modals zu stoppen, wenn sie geschlossen wurden. Das Problem ist, dass mein modales Skript das Modal von seinem ursprünglichen Platz zu dem schließenden -Tag verschiebt. Mit dem Stop-Video-Skript über dem modalen Fenster hört das Video also nie auf zu spielen, nachdem Modal geschlossen wurde.

Hier ist das modale Skript i https://github.com/VodkaBears/Remodal verwenden

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

ZU STOPPEN

<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

Auslöser ein Klick auf die Video stop button es zu stoppen, wenn die modal-close-button geklickt wird . Dies ist nur ein Beispiel, passen Sie es also an.

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

Meine Vermutung ist, dass Sie Probleme Stoppen des Videos haben, weil es in einem Iframe ausgeführt wird. Sie könnten diese (Anmerkung, dass ich das iframe-Tag anstelle des embed-Tag bin mit) versuchen:

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>

Meine Antwort ist durch eine Antwort inspiriert von Rob W

Weitere Informationen zu den remodal.js-Ereignissen finden Sie unter Github Page