Iframes responsivos en Chrome 154

Sebastian Benz
Bramus

Publicado el 16 de septiembre de 2026

Chrome 154 agrega compatibilidad con los iframes con tamaño adaptable, lo que permite que un <iframe> se ajuste según el tamaño intrínseco de su documento incorporado. Esto es ideal para incorporar sin problemas widgets de comentarios de terceros, incorporaciones de redes sociales de altura variable o cualquier otro tipo de incorporación que use un <iframe>.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: not supported.
  • Safari: not supported.

Source

Los iframes con tamaño adaptable reemplazan un patrón común en el que los desarrolladores miden manualmente el contenido del iframe, envían dimensiones con postMessage() y actualizan manualmente el tamaño del iframe en la página de incorporación.

En esta grabación, se muestra un formulario de comentarios incorporado en una página con un iframe. Cuando el usuario agrega su comentario, la altura del iframe dentro de la página de incorporación se actualiza de forma dinámica, lo que crea una experiencia visual fluida sin barras de desplazamiento.

Cómo ajustar el tamaño de un iframe a su contenido

De forma predeterminada, un iframe tiene su propio viewport. Si el documento incorporado es más alto que ese viewport, es posible que los usuarios vean una barra de desplazamiento adicional. Con el ajuste de tamaño de iframe responsivo, la página de incorporación puede usar el ajuste de tamaño basado en el contenido:

.embed {
  width: 100%;
  frame-sizing: content-height;
}

El documento incorporado debe habilitar la opción:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

A continuación, se muestra un ejemplo completo:

<style>
  .embed {
    width: 100%;
    frame-sizing: content-height;
  }
</style>
<iframe class="embed" src="/comments.html" title="Comments">
</iframe>

Y en /comments.html:

<!doctype html>
<html>
  <head>
    <meta name="responsive-embedded-sizing" content="allow-origins=*">
  </head>
  <body>
    ...
  </body>
</html>

Ahora, el iframe puede usar la altura del contenido del documento incorporado en lugar de comportarse como un viewport de altura fija.

Usar frame-sizing

La nueva propiedad frame-sizing controla qué dimensión se deriva del contenido del iframe.

Entre los valores admitidos, se incluyen los siguientes:

frame-sizing: auto;
frame-sizing: content-width;
frame-sizing: content-height;
frame-sizing: content-inline-size;
frame-sizing: content-block-size;

auto mantiene el comportamiento de tamaño del iframe existente.

En la mayoría de los modos de escritura horizontales, content-height y content-block-size son los valores más útiles para expandir verticalmente las inserciones.

También puedes combinar frame-sizing con otras restricciones de CSS:

.embed {
  width: 100%;
  max-height: 80vh;
  frame-sizing: content-height;
}

Cambio de tamaño después de cambios en el contenido dinámico

El navegador no observa de forma continua cada cambio de diseño dentro del documento incorporado.

Si el contenido del iframe cambia después del diseño inicial, por ejemplo, después de cargar más comentarios o expandir un panel, el documento incorporado puede solicitar un nuevo cálculo de tamaño con window.requestResize().

async function loadMore() {
  const items = await fetchMoreItems();
  renderItems(items);
  window.requestResize();
}

Es mejor llamar a window.requestResize() antes del diseño, después de que se hayan realizado todos los cambios en el documento. Este modelo de actualización explícito ayuda a evitar los bucles de cambio de tamaño en los que cambiar el tamaño del iframe cambia su viewport, lo que cambia su contenido y, luego, vuelve a cambiar su tamaño.

Incorporaciones de origen cruzado

El ajuste de tamaño responsivo también se puede usar con elementos iframe de origen cruzado. El documento incorporado puede restringir los orígenes permitidos:

<meta
  name="responsive-embedded-sizing"
  content="allow-origins=https://publisher.example">

Esto limitará el ajuste de tamaño responsivo solo a https://publisher.example. Los orígenes múltiples se separan con un espacio: content="allow-origins=https://publisher1.example https://publisher2.example".

En el caso de los widgets de terceros, restringe el acceso a los orígenes que lo necesiten. Este mecanismo complementa los controles de seguridad de iframe existentes, como la directiva frame-ancestors de la Política de seguridad del contenido, que controla qué sitios pueden incorporar una página.

Mejora progresiva

Puedes usar consultas de funciones para mantener un resguardo existente para los navegadores que no admiten frame-sizing:

.widget {
  width: 100%;
  height: 500px;
}

@supports (frame-sizing: content-height) {
  .widget {
    height: auto;
    frame-sizing: content-height;
  }
}

Si el documento incorporado se actualiza de forma dinámica, también puedes detectar funciones de requestResize():

if ("requestResize" in window) {
  window.requestResize();
}

Por lo tanto, el código de ajuste de tamaño de iframe existente puede permanecer como alternativa mientras se expande la compatibilidad.

Probar

Prueba el ajuste de tamaño de iframe responsivo en la siguiente demostración: