JavaScript

Detener video al cerrar modal BootStrap

Detener video al cerrar modal Bootstrap. En algunos casos se requiere reproducir un video en un modal BootStrap y a veces al cerrar el modal suele seguir reproduciendo el video.

Detener video al cerrar modal Bootstrap

Para darle solución en este articulo veremos 2 ejemplos completos

¿Cómo hacer que video deje de reproducirse cuando cierro el modal?

La solución es muy sencilla existe varias opciones pero en este articulo veremos y usaremos la función remove() para eliminar el IFRAME y al momento de nuevamente abrir el modal cargara nuevamente el iframe con el video.

Ejemplo de código modal Bootstrap

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button id="myBtn">VER VIDEO</button>

<!-- The Modal -->
<div id="myModal" class="modal" width="100%">

<!-- Modal content -->
<div class="modal-content" style="background-color:#000;">
<div class="modal-header" style="background-color:#000;">
<span
class="close" id="span-close"><i
class="far fa-times-circle" id="tache"></i></span>
</div>
<div class="embed-container" id="embed-container-desk">
<iframe
src="https://player.vimeo.com/video/158196905?title=0&byline=0&portrait=0"
width="640" height="340" frameborder="0"
webkitallowfullscreen mozallowfullscreen
allowfullscreen style="top:-350px;"></iframe>

</div>
</div>
</div>

Tenemos que capturar el evento al cerrar la modal y a través de una instrucción JavaScript detener el vídeo, en este caso como es un iframe, es suficiente con eliminar el iframe haciendo uso de la función remove():

$('#myModal').on('hidden.bs.modal', function () {
$(".embed-container").find('iframe').remove();
});

Segundo ejemplo completo ventana modal

Crearemos un modal con el framework Bootstrap y agregaremos la ID llamado modalVideo, luego a través de código JavaScript y/o jQuery validaremos nuestro modal para que cierre el video y audio en plena reproducción.

<div id="modalVideo" class="modal fade" role="dialog"> <div class="modal-dialog-youtube"> <div class="modal-content-youtube"> <div class="modal-body-youtube"> <div id="perfil_video"> <iframe id="cartoonVideo" src="//www.youtube.com/embed/DTvWTcqmbzI" frameborder="0" scrolling="no"></iframe> </div> </div> </div> </div> </div>

Ahora veremos el código jQuery

En este ejemplo veremos de como detener la reproducción del video YouTube con la función remove() de jQuery. Además, hemos creado una condicional para verificar si existe o esta vacío el ID ·cartoonVideo, por ejemplo, si la id tiene contenido no realizara ningún evento.

Sin embargo, si este vacío usaremos la función append() para agregar un iframe con el video de YouTube

<script type='text/javascript'>
$(document).ready(function() {
$('#modalVideo').on('show.bs.modal', function () {
if ( $('#cartoonVideo').length > 0 ) {
} else {
$('#perfil_video').append('<iframe id="cartoonVideo" width="100%" height="315" src="//www.youtube.com/embed/DTvWTcqmbzI" frameborder="0" scrolling="no"> </iframe>');
}
});

$('#modalVideo').on('hidden.bs.modal', function () {
$('#perfil_video').find('iframe').remove();
});

});
</script>

Conclusiones y recomendaciones

Al cerrar una ventana modal que está reproduciendo un video, el sonido y/o video suele seguir reproduciendo de manera interna y a veces confunde al usuario final.

Por lo tanto, en este articulo hemos aprendido a eliminarlo y que el audio y video se cierre por completo.
Al volver a ejecutar el modal a través de la condicional verificara y cargara el video si fuera necesario.

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. 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. Más información
Privacidad