Durante este mes, he estado trabajando en el desarrollo de una nueva plantilla responsiva para mi blog de noticias de Puerto Montt con el apoyo de Gemini.
El último desafío técnico que enfrenté fue lograr que los videos de YouTube se ajustaran correctamente a las pantallas de los smartphones, ya que se desbordaban del diseño. La solución propuesta por la IA fue implementar un contenedor con estilos CSS específicos para asegurar que cada video sea completamente fluido. Aquí les comparto el código sugerido:
/* Estilo del contenedor para que el video sea responsivo */
.video-responsive {
position: relative;
padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 20px;
}
.video-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Y entonces, cada vez que incruste un video, lo rodeo por un div como el que se ve a continuación:
<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXX" ...></iframe>
</div>
No hay comentarios.:
Publicar un comentario