Introducción

En WordPress es muy habitual incrustar contenido externo con iframes: vídeos de YouTube, presentaciones, mapas, reproductores, widgets, etc. Un problema frecuente es que esos iframes se desbordan del contenedor del tema —especialmente en dispositivos móviles o cuando el tema utiliza columnas y anchuras fijas—. Este artículo explica, con todo lujo de detalles, técnicas CSS prácticas y específicas para WordPress que garantizan que los iframes nunca excedan el contenedor, manteniendo además la relación de aspecto y la accesibilidad.

Por qué ocurre el desbordamiento

• Anchura fija dentro del iframe: muchos iframes usan atributos width/height absolutos (px) que no responden al tamaño del contenedor.
• Contenedores con overflow visible o con anchuras limitadas: si el iframe tiene un ancho mayor que el contenedor, se sale.
• Bloques generados por editores o plugins: algunos bloques o shortcodes añaden estilos que no son responsivos.
• Falta de reglas CSS globales: no hay una política uniforme en el theme para hacer responsivo el contenido embebido.

Principios básicos a aplicar

• Hacer que el iframe tenga width: 100% para adaptarse al ancho del contenedor.
• Mantener la relación de aspecto (16:9, 4:3, etc.) para evitar deformaciones.
• Evitar usar height fijo en píxeles sobre el iframe utilizar técnicas de caja inline o la propiedad modernísima aspect-ratio con fallback.
• Aplicar reglas específicas para los selectores que WordPress y Gutenberg generan (.entry-content, .wp-block-embed, .wp-block-embed__wrapper, etc.).

Métodos prácticos (resumen rápido)

1. Wrapper con técnica de “padding-bottom” (intrinsic ratio). Funciona en todos los navegadores y es el método más compatible.
2. Uso de la propiedad CSS aspect-ratio (más simple y limpio, pero requiere navegadores modernos).
3. Reglas globales que establezcan max-width:100% y display:block sobre iframes dentro del contenido del post.
4. Si es necesario, añadir JavaScript o un plugin (por ejemplo FitVids.js) para embebidos complejos.

Implementación paso a paso

A continuación los ejemplos de código y explicación de cada método. Coloca las reglas CSS en el área de Personalizar → CSS adicional o en tu archivo CSS del tema hijo. Si prefieres, también puedes encolarlas desde functions.php (ver ejemplo PHP más abajo).

Método 1 — Wrapper con padding-bottom (mejor compatibilidad)

Crear un contenedor que fije la relación de aspecto con padding-bottom. Inserta el iframe dentro de ese contenedor. Esta técnica utiliza que el padding-bottom en porcentaje se calcula respecto al ancho del contenedor, lo que permite mantener la proporción.

/ Contenedor que mantiene aspecto 16:9 /
.embed-responsive{
  position: relative
  width: 100%
  height: 0
  padding-bottom: 56.25% / 16:9 = 9/16 = 56.25% /
  overflow: hidden
}

/ Iframe que ocupa todo el contenedor /
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive embed{
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  border: 0
  display: block
}

Para otras relaciones de aspecto ajusta el padding-bottom: por ejemplo 75% para 4:3 (3/4 = 75%).

Método 2 — Usar aspect-ratio (soporte moderno)

Si no necesitas compatibilidad con navegadores muy antiguos, la propiedad aspect-ratio simplifica mucho el CSS:

/ Más sencillo: el iframe establece su propia relación de aspecto /
.responsive-iframe{
  width: 100%
  aspect-ratio: 16 / 9
  height: auto / Algunos navegadores usan aspect-ratio para calcular la altura /
  border: 0
  display: block
}

Incluye, si quieres, un fallback a la técnica de padding-bottom para navegadores que no soporten aspect-ratio.

Método 3 — Reglas globales para contenido WordPress

Muchos temas funcionan si aplicas reglas globales a los iframes dentro del contenido. Esto evita tener que modificar cada embed manualmente.

/ Regla global: evita que iframes se salgan del ancho del contenido /
.entry-content iframe,
.wp-block-embed iframe,
.wp-block-embed__wrapper iframe,
iframe {
  max-width: 100%
  width: 100%
  height: auto / fallback: no mantiene relación de aspecto, por eso conviene combinarlo con los otros métodos /
  border: 0
  display: block
}

Nota: height:auto no mantiene la relación de aspecto en iframes en todos los casos, por eso se combina con wrapper/aspect-ratio.

Cómo añadir estas reglas en WordPress

• Personalizar → CSS adicional: copia y pega las reglas CSS directamente.
• Archivo style.css del tema hijo: añade las reglas en tu tema hijo para que no las pierdas en actualizaciones.
• Encolar un archivo CSS: usa functions.php para encolar un archivo responsive-iframes.css (ejemplo abajo).
• Agregar CSS inline: si necesitas inyectar reglas desde PHP, wp_add_inline_style() es útil.

Ejemplo: encolar un CSS desde functions.php

function tema_responsive_iframes_css() {
  wp_enqueue_style( tema-responsive-iframes, get_stylesheet_directory_uri() . /css/responsive-iframes.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, tema_responsive_iframes_css )

Ejemplo: añadir CSS inline desde functions.php

function tema_inline_iframe_css() {
  css = 
  .embed-responsive{position:relativewidth:100%height:0padding-bottom:56.25%overflow:hidden}
  .embed-responsive iframe{position:absolutetop:0left:0width:100%height:100%border:0}
  
  wp_add_inline_style( twentyseventeen-style, css )
}
add_action( wp_enqueue_scripts, tema_inline_iframe_css )

En wp_add_inline_style el primer parámetro debe ser el handle del stylesheet ya encolado en tu tema ajusta según tu tema.

Consideraciones avanzadas

• Embeber contenidos de terceros: algunos iframes de proveedores externos incluyen estilos inline o atributos width/height muy estrictos. El wrapper o aspect-ratio suele vencer esos atributos, pero en casos extremos podrías necesitar usar !important con cuidado.
• Lazy-loading: añadir loading=lazy al iframe mejora el rendimiento los navegadores modernos lo soportan.
• FitVids.js o soluciones JS: si tienes muchos formatos y quieres una solución lista para usar, FitVids.js adapta automáticamente muchos embeds. Requiere añadir un pequeño script.
• Accesibilidad: conserva el atributo title y allowfullscreen cuando proceda evita eliminar atributos necesarios por plugins o sanitizadores.

Compatibilidad y pruebas

• Prueba en pantallas pequeñas (móvil) y en pantallas grandes (escritorio) para comprobar que el iframe escala correctamente.
• Verifica navegadores antiguos si tu público los emplea mantén la técnica de padding-bottom como fallback.
• Revisa el código del proveedor del iframe: si el embed viene con wrapper propio, adapta tus selectores para targetear ese wrapper.

Resumen final

La manera más robusta y compatible de evitar que los iframes excedan su contenedor en WordPress es usar un wrapper con ratio (padding-bottom) o, cuando sea posible, aspect-ratio. Complementa con reglas globales (max-width:100%, display:block) aplicadas a los selectores de contenido (.entry-content, .wp-block-embed, etc.). Añade las reglas vía CSS adicional, archivo del tema hijo o encolado desde functions.php. Con estas prácticas los iframes quedarán siempre contenidos, responsivos y bien integrados en el diseño del sitio.

Enlaces útiles: WordPress Developer Resources