Cómo hacer un iframe responsive en Blogger
Aprende cómo hacer un iframe responsive en Blogger para que se adapte automáticamente al tamaño de pantalla sin romper tu diseño retro.
¿Qué significa que un iframe sea responsive?
Un iframe responsive es aquel que se ajusta automáticamente al ancho del dispositivo, ya sea computadora, tablet o móvil.
Si no es responsive, puede desbordarse y romper el diseño de tu blog.
Problema común
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"> </iframe>
Este código tiene un ancho fijo (560px). En móviles se verá mal.
Solución: contenedor responsive
La forma correcta de hacer un iframe responsive en Blogger es envolverlo en un contenedor con posición relativa.
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;"> <iframe src="https://www.youtube.com/embed/VIDEO_ID" style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;" allowfullscreen> </iframe> </div>
¿Por qué funciona?
El iframe ocupa el 100% del ancho y alto del contenedor.
Cómo insertarlo en Blogger paso a paso
Paso 1: Copia el código del video o iframe.
Paso 2: Ve a Blogger y crea una nueva entrada.
Paso 3: Cambia al modo HTML.
Paso 4: Reemplaza el código original por la versión responsive.
Paso 5: Publica y verifica en móvil.
Opción avanzada: hacerlo con CSS global
Si quieres que todos los iframes sean responsive automáticamente, agrega esto en tu plantilla dentro de <b:skin>:
.responsive-iframe {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.responsive-iframe iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}
Y luego usa este HTML en tus entradas:
<div class="responsive-iframe"> <iframe src="https://www.youtube.com/embed/VIDEO_ID"> </iframe> </div>
Para resumir
Es una solución sencilla que mejora la experiencia del usuario y la apariencia profesional de tu blog.
