Cuando normalmente insertas un video en un sitio, el tamaño del cuadro se indica en el código y resulta que cuando cambias la resolución de la pantalla, en diferentes dispositivos el video incrustado en el sitio se muestra sin tener en cuenta la pantalla, como si lo habías abierto en el alojamiento del vídeo.
Nuestra tarea es asegurarnos de que cuando cambie el tamaño de la página, el fotograma del video cambie automáticamente de tamaño. Al abrir el sitio desde diferentes dispositivos, el video se ajustará al tamaño de la pantalla.
Este manual ha sido probado con YouTube y la aplicación MediaCMS.
Por defecto recibirás un enlace como:
<iframe width="560" height="315" src="https://synay.dev/embed?m=d0xUIusUo" frameborder="0" allowfullscreen></iframe>
Para que el video se ajuste automáticamente, llevemos este código al formulario:
<div class="container">
<iframe src="https://synay.dev/embed?m=d0xUIusUo"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
Como puede ver, eliminamos los tamaños fijos y agregamos 2 clases CSS: contenedor y video.
Ahora necesitamos agregar estas clases en el archivo de estilo de nuestro sitio:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Al elemento contenedor se le asigna una altura cero y un porcentaje de relleno inferior. El porcentaje de relleno inferior es un porcentaje del ancho del contenedor, por lo que tiene una relación de aspecto fija. Pero para que el iframe se muestre dentro de un contenedor de altura cero, debemos hacer que el contenedor sea relativo y el iframe absoluto colocándolo dentro de un div.
No olvide agregar la versión a la ruta de su archivo css para que cuando lo abra nuevamente, se cargue el archivo de estilo real y no la versión en caché guardada previamente por el navegador.
Ejemplo:
<link rel="stylesheet" href="https://domain.tld/css/style.min.css?_v=202408222001">
Ahora su video incrustado se adaptará automáticamente al tamaño de la pantalla o al tamaño de la ventana del navegador.