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:

Source code

<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