 Sebastian Benz [GitHub](https://github.com/sebastianbenz) [Mastodon](https://mastodon.cloud/@sebabenz) [Bluesky](https://bsky.app/profile/sebabenz.bsky.social)  Bramus [X](https://twitter.com/bramus) [GitHub](https://github.com/bramus) [Mastodon](https://front-end.social/@bramus) [Bluesky](https://bsky.app/profile/bram.us) [Homepage](https://www.bram.us/)
Published: September 16, 2026
Chrome 154 adds support for **responsively-sized iframes** , letting an `
And in `/comments.html`:
...
The iframe can now use the embedded document's content height instead of behaving like a fixed-height viewport.
> [!NOTE]
> **Note:** Responsive iframes might cause content shifts as the embedded document is loaded after the host document and might shift content on your page. This can negatively affect your Core Web Vitals, in particular, when displaying responsive iframes in the first viewport.
## Use `frame-sizing`
The new `frame-sizing` property controls which dimension is derived from the iframe's content.
Supported values include:
frame-sizing: auto;
frame-sizing: content-width;
frame-sizing: content-height;
frame-sizing: content-inline-size;
frame-sizing: content-block-size;
`auto` keeps the existing iframe sizing behavior.
For most horizontal writing modes, `content-height` and `content-block-size` are the most useful values for vertically expanding embeds.
You can also combine `frame-sizing` with other CSS constraints:
.embed {
width: 100%;
max-height: 80vh;
frame-sizing: content-height;
}
## Resizing after dynamic content changes
The browser doesn't continuously observe every layout change inside the embedded document.
If the iframe's content changes after the initial layout, for example after loading more comments or expanding a panel, the embedded document can request a new size calculation with `window.requestResize()`.
async function loadMore() {
const items = await fetchMoreItems();
renderItems(items);
window.requestResize();
}
It's best to call `window.requestResize()` before layout, after all changes to the document have been made. This explicit update model helps avoid resize loops where changing the iframe size changes its viewport, which changes its contents, which changes its size again.
## Cross-origin embeds
Responsive sizing can also be used with cross-origin iframes. The embedded document can restrict which origins are allowed:
This will limit responsive sizing to only `https://publisher.example`. Multiple origins are separated by space: `content="allow-origins=https://publisher1.example https://publisher2.example"`.
For third-party widgets, restrict access to the origins that need it. This mechanism complements existing iframe security controls such as Content Security Policy's `frame-ancestors` directive, which controls which sites can embed a page.
## Progressive enhancement
You can use feature queries to keep an existing fallback for browsers that don't support `frame-sizing`:
.widget {
width: 100%;
height: 500px;
}
@supports (frame-sizing: content-height) {
.widget {
height: auto;
frame-sizing: content-height;
}
}
If the embedded document updates dynamically, you can also feature-detect `requestResize()`:
if ("requestResize" in window) {
window.requestResize();
}
Existing iframe sizing code can therefore remain as a fallback while support expands.
## Try it
Try out responsive iframe-sizing in [the following demo](https://codepen.io/editor/web-dot-dev/pen/01a0679f-e1cc-7b89-bb86-3ee628a4132a):