Si ya tienes cierta experiencia trabajando con Boostrap sabrás que para embeber o incrustar un video de Youtube en una ventana modal, solamente debemos estructurar algunos contenedores con las clases predefinidas de este framework, y luego pegar el código de dicho video dentro del elemento que contenga la clase .modal-body. Sin embargo, al hacer esto surge un problema que consiste en que cuando presionamos el botón de play, el video se reproduce correctamente, pero cuando cerramos la ventana modal el video continúa reproduciéndose, o por lo menos, aún seguimos escuchando su audio como fondo.
Por ejemplo, vamos a crear un botón que al ser presionado permitirá que el navegador despliegue en pantalla una ventana modal con un video incrustado.
Aquí tienes el código HTML con las clases de Boostrap:
<div class="ml-2 mt-3">
<h1>Video incrustado en una ventana modal</h1>
<p>Presiona el botón para ver el video.</p>
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Ver video</a>
<!—Ventana Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/GRxofEmo3HA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
Si pulsas sobre este botón se muestra la ventana modal. Reproduce el video y luego cierra la ventana y podrás notar que aún puedes escuchar la música. Para solucionar esto, podemos utilizar código de JavaScript / Jquery.
Lo primero será añadir un atributo id al elemento iframe del código del video de Youtube. Por ejemplo:
id="four-seasons-video"Luego escribimos el siguiente código Jquery:
$(document).ready(function(){
/*Almacenar como variable la URL (valor del atributo src del elemento iframe) del video*/
var url = $("#four-seasons-video").attr('src');
/*Valor vacío para el atributo src de iframe cuando se cierra la ventana modal, con lo cual se detiene la reproducción del video*/
$("#myModal").on('hide.bs.modal', function(){
$("#four-seasons-video").attr('src', '');
});
/*Volver a asignar la url almaceneda*/
$("#myModal").on('show.bs.modal', function(){
$("#four-seasons-video").attr('src', url);
});
});
Si actualizas la página y vuelves a reproducir el video y luego cierras la ventana modal podrás notar que ya no se escucha el audio de fondo.
Aquí tienes el código completo:
See the Pen Incrustrar un video de Youtube dentro de una ventana modal de Boostrap by simplicitytree (@simplicitytree) on CodePen.0
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Cascada CSS - agosto 24, 2023
- El objeto Math - agosto 23, 2023
- Diferencia entre null y undefined en JavaScript - agosto 16, 2023