{"slug": "new-in-chrome-154-iframes-that-automatically-resize-themselves-to-their-content", "title": "New in Chrome 154: iframes that automatically resize themselves to their content", "summary": "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.", "body_md": "~\n\nChrome 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>`.\n\n~\n\n### [#](#the-code) The Code\n\nTo make this work there is a two-way opt-in:\n\n- 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` .\n- 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.\n\nIn code:\n\n```\n/* In styles.css for index.html */\niframe {\n  frame-sizing: content-height;\n  width: 100%;\n}\nphp\n<!-- In the iframe.html’s head -->\n<meta name=\"responsive-embedded-sizing\" content=\"allow-origins=*\">\n```\n\nThe 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();`\n\nUse `allow-origins` to limit which origins the document communicates its size info to.\n\n~\n\n### [#](#demo) Demo\n\nHere’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.\n\nBecause the iframe resizes itself, the form is seamlessly embedded, without any scrollbar appearing at all.\n\n~\n\n### [#](#browser-support) Browser Support\n\n💡 Although this post was originally published in September 2026, the list below is constantly being updated. *Last update: September 23, 2026*.\n\nSupport for responsively size iframes is this:\n\n- Chromium *(Blink)*\n- \n✅ Supported in Chrome 154\n- Firefox *(Gecko)*\n- \n❌ No Support. Follow [Bug 2035008](https://bugzilla.mozilla.org/show_bug.cgi?id=2035008) to stay up-to-date.\n- Safari *(WebKit)*\n- \n❌ No Support. Follow [Bug 314713](https://bugs.webkit.org/show_bug.cgi?id=314713) to stay up-to-date.\n\n~\n\n### [#](#learn-more) Learn More\n\nGet 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)\n\n~\n\n**🔥 Like what you see? Want to stay in the loop? Here's how:**\n\nI can also be found on [𝕏 Twitter](https://x.com/bramus) and [🐘 Mastodon](https://front-end.social/@bramus) but only post there sporadically.", "url": "https://wpnews.pro/news/new-in-chrome-154-iframes-that-automatically-resize-themselves-to-their-content", "canonical_source": "https://www.bram.us/2026/09/23/responsive-iframes/", "published_at": "2026-09-26 13:10:31+00:00", "updated_at": "2026-09-26 13:31:48.888085+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Chrome 154", "Google", "Firefox", "Safari", "Blink", "Gecko", "WebKit"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/new-in-chrome-154-iframes-that-automatically-resize-themselves-to-their-content", "markdown": "https://wpnews.pro/news/new-in-chrome-154-iframes-that-automatically-resize-themselves-to-their-content.md", "text": "https://wpnews.pro/news/new-in-chrome-154-iframes-that-automatically-resize-themselves-to-their-content.txt", "jsonld": "https://wpnews.pro/news/new-in-chrome-154-iframes-that-automatically-resize-themselves-to-their-content.jsonld"}}