Dejar de reproducir video cuando cierro la caja de luz

4 minutos de lectura

Dejar de reproducir video cuando cierro la caja de luz
Idomskt

Creé una ventana emergente usando esto artículo y se ve muy bien.

Aquí esta lo que hice:

<button id="open-popup">Play</button>

<div id="popup-box" class="modal">

  <div class="popup-content">
    <span class="close">&times;</span>
    <p>[vimeo shortcode]</p>
  </div>

</div>

aqui esta el css

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.popup-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

Y aquí está el JS

(function($) {          
$(document).ready(function(){

// Get the modal
var modal = document.getElementById('popup-box');

// Get the button that opens the modal
var btn = document.getElementById("open-popup");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

});
})(jQuery);

Cuando hago clic en el botón, funciona perfectamente, está centrado y se ve muy bien.

El problema es que, cuando cierro la ventana emergente, el audio del video aún se reproduce en segundo plano.

Me gustaría que el video se detuviera cuando cierro la ventana emergente.

Cualquier ayuda será increíble.

Gracias

Dejar de reproducir video cuando cierro la caja de luz
brasofilo

Tienes que eliminar el contenido de Vimeo, deteniendo así el audio por completo. Si no es así, tendría que usar la API de Vimeo para detener/pausar/reproducir el video.

Aquí una demostración de cómo se puede hacer, agregando un iFrame como contenido HTML para #popup-box .popup-content y luego configurando el HTML a una cadena vacía para eliminarla.

(function($) {          
    $(document).ready(function(){
		 
         var iframe="<iframe src="https://player.vimeo.com/video/213100067?title=0&byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>";
        
         // When the user clicks on the button, open the modal 
         $("#open-popup").on('click', function(e) {
             e.preventDefault();
             $('#popup-box').show();
             $('#popup-box .popup-content').html(iframe);
         });
        
         // When the user clicks on <span> (x), close the modal
         $('#popup-box .close, #popup-box').on('click', function() {
            $('#popup-box').hide();
            $('#popup-box .popup-content').html('');
         });

    });
})(jQuery);
/* The Modal (background) */
.modal {
    display:none;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.popup-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open-popup">Play</button>

<div id="popup-box" class="modal">
	<span class="close">&times;</span>
	<div class="popup-content">
	</div>
</div>

  • Gracias por su respuesta, lo modifiqué un poco y eliminé var iframe = ‘

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad