Agregar vídeos de YouTube con Bootstrap 4

Bootstrap 4 nos pone muy fácil la forma para agregar vídeos de YouTube en tu página web adaptable a todos los dispositivos.

Hace unos años esto era muy complicado. Incluso, había opciones para incrustar mediante JavaScript con el objetivo de posicionar una imagen del reproductor en el centro del vídeo y otros detalles que no quiero explicar. Ya me puedo olvidar de ese complejo código.

Código de marcado que muestra vídeos de YouTube con Bootstrap 4

Con Bootstrap 4, agregar vídeos de YouTube en tu página web es muy sencillo.

Con tan solo agregar el siguiente código de marcado:

<div class="row">
    <div class="col-12">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/67Sb3M8GQwQ" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</div>

En este caso específico, he definido una fila con una única columna que contiene el contenedor del vídeo o iframe.

Con tan solo agregar las clases «embed-responsive» y «embed-responsive-16by9» en el contenedor padre ya queda preparado para que el vídeo se auto ajuste.

Y, nada más, esto es todo. Así de simple.

Importante: No te olvides de incluir la librería Bootstrap en tu página web para que esto funcione bien.

Conclusión

Crear incrustaciones de vídeo o presentación de diapositivas receptivas basadas en el ancho del contenedor padre creando una relación intrínseca que se escala en cualquier dispositivo es viable actualmente con Bootstrap de forma fácil y sencilla.

Me sorprende gratamente ver como este popular Framework nos facilita la vida cada vez más agregando en su biblioteca este tipo de funciones que actualmente están muy demandadas en los desarrollos para la web.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(5 votos, promedio: 5 de 5)
Comparte en las redes sociales

2 respuestas a “Agregar vídeos de YouTube con Bootstrap 4”

  1. Ruben dice:

    Estimado:

    Muy bueno. Tengo un vídeo el cual lo muestro desde un botón (se abre una capa y dentro de ella el vídeo, esta capa tiene un botón para cerrar también) ahora el problema es como hacer que se cierre el vídeo al desaparecer la capa ya que al hacerlo no se ve más el vídeo pero si se escucha.

    • Jose Aguilar dice:

      Hola,

      Tendrás que buscar si existe la posibilidad de manejar los botones del video con JavaScript. Dependiendo de que plataforma de vídeo estés usando quizá si te lo permite.

      Saludos

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre