Incrustar Videos de Youtube Responsivamente en tu web + Laravel CKEditor

▶

Otro detalle que considero interesante es que se puedan incrustar videos de YouTube aaptativos o responsivos en nuestra web.

Si vamos a Youtube, seleccionamos el video, damos clic en "Compartir", luego en "Incrustar", y copiamos el código generado.

Si en el editor intentas pegar ese código directamente, verás que no se adapta automáticamente al tamaño de la ventana. Para solucionarlo, tenemos un par de maneras, y esto depende nuevamente de cómo hayas configurado tu editor.

Responsividad del video

¿El problema? Que el video no es responsivo, es decir, no se adapta a distintos tamaños de pantalla. Verás que aparece una barra de desplazamiento muy incómoda.

Para solucionar esto, vamos a adaptar el video manualmente, definimos el siguiente CSS:

.video-container {
	aspect-ratio: 16 / 9;
	margin: 15px auto;
	overflow: hidden;
	position: relative;
	width: 100%;
	max-width: 600px;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Y ahora los videos lo definimos como:

<div class="video-container">
 <iframe src="..." frameborder="0" allowfullscreen></iframe>
</div>

Con eso, el iframe tiene width y height en 100%, top y left en 0, y la relación de aspecto definida se maneja desde el contenedor.

Puedes jugar con estos valores para ver cómo se comporta. Este HTML y CSS te sirve para cualquier video de YouTube con relación de aspecto 16:9, que es la más común.