{"slug": "responsive-iframes-in-chrome-154", "title": "Responsive Iframes in Chrome 154", "summary": "Google's Chrome 154 adds support for responsively-sized iframes, letting an `\n```\n\nAnd in `/comments.html`:\n\n```\n\n\n \n \n \n \n ...\n \n\n```\n\nThe iframe can now use the embedded document's content height instead of behaving like a fixed-height viewport.\n\n## Use `frame-sizing`\n\nThe new `frame-sizing` property controls which dimension is derived from the iframe's content.\n\nSupported values include:\n\n```\nframe-sizing: auto;\nframe-sizing: content-width;\nframe-sizing: content-height;\nframe-sizing: content-inline-size;\nframe-sizing: content-block-size;\n```\n\n`auto` keeps the existing iframe sizing behavior.\n\nFor most horizontal writing modes, `content-height` and `content-block-size` are the most useful values for vertically expanding embeds.\n\nYou can also combine `frame-sizing` with other CSS constraints:\n\n```\n.embed {\n width: 100%;\n max-height: 80vh;\n frame-sizing: content-height;\n}\n```\n\n## Resizing after dynamic content changes\n\nThe browser doesn't continuously observe every layout change inside the embedded document.\n\nIf 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()`.\n\n``` js\nasync function loadMore() {\n const items = await fetchMoreItems();\n renderItems(items);\n window.requestResize();\n}\n```\n\nIt'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.\n\n## Cross-origin embeds\n\nResponsive sizing can also be used with cross-origin iframes. The embedded document can restrict which origins are allowed:\n\n```\n\n```\n\nThis will limit responsive sizing to only `https://publisher.example`. Multiple origins are separated by space: `content=\"allow-origins=https://publisher1.example https://publisher2.example\"`.\n\nFor 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.\n\n## Progressive enhancement\n\nYou can use feature queries to keep an existing fallback for browsers that don't support `frame-sizing`:\n\n```\n.widget {\n width: 100%;\n height: 500px;\n}\n\n@supports (frame-sizing: content-height) {\n .widget {\n height: auto;\n frame-sizing: content-height;\n }\n}\n```\n\nIf the embedded document updates dynamically, you can also feature-detect `requestResize()`:\n\n```\nif (\"requestResize\" in window) {\n window.requestResize();\n}\n```\n\nExisting iframe sizing code can therefore remain as a fallback while support expands.\n\n## Try it\n\nTry out responsive iframe-sizing in [the following demo](https://codepen.io/editor/web-dot-dev/pen/01a0679f-e1cc-7b89-bb86-3ee628a4132a):", "url": "https://wpnews.pro/news/responsive-iframes-in-chrome-154", "canonical_source": "https://developer.chrome.com/blog/responsive-iframes", "published_at": "2026-09-23 08:51:06+00:00", "updated_at": "2026-09-23 08:59:16.103495+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Google", "Chrome 154", "frame-sizing", "requestResize()", "postMessage()", "Content Security Policy"], "alternates": {"html": "https://wpnews.pro/news/responsive-iframes-in-chrome-154", "markdown": "https://wpnews.pro/news/responsive-iframes-in-chrome-154.md", "text": "https://wpnews.pro/news/responsive-iframes-in-chrome-154.txt", "jsonld": "https://wpnews.pro/news/responsive-iframes-in-chrome-154.jsonld"}}