Cómo Hacer iFrames 100% Responsivos en Blogger (HTML y CSS)

Aprende a integrar iFrames de juegos, videos o sitios externos para que se adapten perfectamente a celulares, tablets y computadoras sin romperse.

Optimiza la visualización de iFrames embebidos en cualquier pantalla.

El problema de los iFrames con tamaño fijo

Por defecto, cuando insertas un <iframe> con valores de ancho y alto en píxeles (por ejemplo, width="640" height="360"), el contenido se desborda en teléfonos móviles y crea un desbarajuste visual en el diseño de tu blog.

Paso 1: Agrega este código CSS en tu plantilla de Blogger

Pega este bloque de reglas CSS dentro del apartado de estilos (<b:skin>) o en la sección de Diseño > Añadir un gadget > HTML/JavaScript encerrado entre etiquetas <style>:

/* Contenedor Responsivo para iFrames (Relación 16:9) */
.responsive-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background-color: #000;
}

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

Paso 2: Código HTML para la entrada

En el editor de Blogger, pasa a la vista HTML e inserta tu iFrame envuelto por la clase responsive-iframe-container:

<div class="responsive-iframe-container">
  <iframe 
    src="URL_DE_TU_JUEGO_O_VIDEO" 
    title="Contenido Embebido"
    allowfullscreen>
  </iframe>
</div>

¿Cómo ajustar la relación de aspecto?

Si tu iFrame no es panorámico (16:9), solo debes ajustar la propiedad padding-bottom en tu CSS según las proporciones de tu contenido:

• 16:9 (Videos / Juegos estándar): padding-bottom: 56.25%;
• 4:3 (Pantalla clásica / Cuadrada): padding-bottom: 75%;
• 1:1 (Formato Cuadrado): padding-bottom: 100%;