Incrustrar un video de Youtube dentro de una ventana modal de Boostrap

En este momento estás viendo Incrustrar un video de Youtube dentro de una ventana modal de Boostrap
  • Autor de la entrada:
  • Categoría de la entrada:Boostrap
  • Tiempo de lectura:4 minutos de lectura

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">&times;</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.

Artículos Relacionados
Orlando José-Rivera
Últimas entradas de Orlando José-Rivera (ver todo)

Deja una respuesta