New in Chrome 154: iframes that automatically resize themselves to their content

Chrome 154 adds support for responsively-sized iframes, letting an iframe size itself to the intrinsic dimensions of its embedded document via a two-way opt-in. The embedder sets the frame-sizing CSS property to auto, content-height, or content-width on the iframe, while the embedded document includes a meta tag named responsive-embedded-sizing with allow-origins to permit size communication and calls window.requestResize() to report a new size. Firefox and Safari do not support the feature, with tracking bugs 2035008 and 314713 respectively.

~ 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 . ~ the-code The Code To make this work there is a two-way opt-in: - The embedder e.g. index.html needs to set the frame-sizing CSS property with a value of auto , content-height , or content-width or its logical variants on the iframe . - The document loaded in the <iframe e.g. iframe.html needs to include a meta tag to indicate that it’s OK to communicate its size the parent embedder. In code: / In styles.css for index.html / iframe { frame-sizing: content-height; width: 100%; } php < -- In the iframe.html’s head -- <meta name="responsive-embedded-sizing" content="allow-origins= " The content’s size is communicated from the embedded document after page load. To communicate a new size, the document in the frame must call window.requestResize ; Use allow-origins to limit which origins the document communicates its size info to. ~ demo Demo Here’s a demo that contains a form which is an <iframe . Whenever you go to a next step of the form, the <iframe resizes itself to its contents … if your browser suppports frame-sizing that is. Because the iframe resizes itself, the form is seamlessly embedded, without any scrollbar appearing at all. ~ browser-support Browser Support 💡 Although this post was originally published in September 2026, the list below is constantly being updated. Last update: September 23, 2026 . Support for responsively size iframes is this: - Chromium Blink - ✅ Supported in Chrome 154 - Firefox Gecko - ❌ No Support. Follow Bug 2035008 https://bugzilla.mozilla.org/show bug.cgi?id=2035008 to stay up-to-date. - Safari WebKit - ❌ No Support. Follow Bug 314713 https://bugs.webkit.org/show bug.cgi?id=314713 to stay up-to-date. ~ learn-more Learn More Get all the details about responsive iframes on developer.chrome.com , in this article I co-authored: Responsive iframes in Chrome 154 → https://developer.chrome.com/blog/responsive-iframes ~ 🔥 Like what you see? Want to stay in the loop? Here's how: I can also be found on 𝕏 Twitter https://x.com/bramus and 🐘 Mastodon https://front-end.social/@bramus but only post there sporadically.