Published: September 16, 2026
Chrome 154 adds support for responsively-sized iframes, letting an <iframe> size itself based on the intrinsic size of its embedded document. This is perfect for seamlessly embedding third-party comment widgets, varying-height social media embeds, or any other type of embed that uses an <iframe>.
Responsively-sized iframes replace a common pattern where developers manually measure iframe content, send dimensions with postMessage() and manually update the iframe size in the embedding page.
Size an iframe to its content #
By default, an iframe has its own viewport. If the embedded document is taller than that viewport, users may get an additional scrollbar. With responsive iframe sizing, the embedding page can instead use content-based sizing:
.embed {
width: 100%;
frame-sizing: content-height;
}
The embedded document must opt in:
<meta name="responsive-embedded-sizing" content="allow-origins=*">
Here is a full example:
<style>
.embed {
width: 100%;
frame-sizing: content-height;
}
</style>
<iframe class="embed" src="https://developer.chrome.com/comments.html" title="Comments">
</iframe>
And in /comments.html:
<!doctype html>
<html>
<head>
<meta name="responsive-embedded-sizing" content="allow-origins=*">
</head>
<body>
...
</body>
</html>
The iframe can now use the embedded document's content height instead of behaving like a fixed-height 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 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:
<meta
name="responsive-embedded-sizing"
content="allow-origins=https://publisher.example">
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: