Me doy cuenta de que esto se ha preguntado antes y por eso, me disculpo, pero tal como está, no puedo obtener un modal emergente para detener la reproducción de un video cuando se presiona el botón de cerrar.
Cualquier ayuda obviamente sería grandiosa.
¡Gracias!
HTML:
<div class="converseVideo"> <div class=textAnchor> <h3 class=stickyConverseText>I was lost for language too</h3> </div> <video autoplay muted loop class="myVideo converseVideoContainer"> <source src="Media/converse.mp4" type="video/mp4"> </video> <button onclick="toggleConversePopUp()" class="playButton conversePlayButton"> <img src="Media/playIcon.jpg" title="Play Icon"> </button> <h2 class=videoTagsLeft>Converse</h2> </div> <div class="videoPopUp" id="popup-1"> <video class="conversePopUp" id="myVideo" controls> <source src="Media/converse.mp4" type="video/mp4"> </video> <button class="closeButton" onclick="toggleConversePopUp()" >×</button> </div>y este es el JS:
let modalOpen = false; // Default to closed function openModal() { setModal(true); } function closeModal() { setModal(false); } function toggleModal() { setModal(!modalOpen); } function setModal(value) { modalOpen = value; document.getElementById("popup-1").classList.toggle("active", value); } function pauseMedia() { document.querySelector('video').pause() } function playMedia() {} function toggleConversePopUp(){ document.getElementById("popup-1").classList.toggle("active"); }La solución a esto fue en realidad bastante simple. Creo que necesitaba tener JQuery que no había configurado y luego era una pieza relativamente simple de JS que se encuentra a continuación ... ¡para cualquiera que se tope con esto y tenga un problema similar!
function toggleConversePopUp(){ document.getElementById("popup-1").classList.toggle("active"); if($('.active').length === 0) { document.getElementById('myVideo').pause(); } }