RESPONSIVE IFRAME

How to wire a responsive iframe

Follow these steps on your own host and embed origins. Use the pack builder to generate snippets, then verify in a Chromium browser that supports frame-sizing.

  1. Confirm the task. You want the iframe height (or width) to follow the embedded document instead of a fixed viewport with nested scrollbars. If you only need same-origin ResizeObserver hacks, you may not need this API.
  2. Generate the pack. Open the tool, set iframe src, title, fallback height, optional max-height, and allow-origins. Click Rebuild and copy the full pack.
  3. Paste host CSS + iframe. On the embedding page, add the @supports (frame-sizing: …) block and the <iframe class="…">. Keep the fixed height outside @supports so older browsers still render a usable box.
  4. Paste embed meta in the initial HTML. Inside the embedded document’s <head>, include <meta name="responsive-embedded-sizing" content="allow-origins=…"> in the first response. Do not inject this meta with JavaScript after load — Chrome docs say late injection will not enable responsive sizing.
  5. Restrict allow-origins for widgets. Prefer concrete https://publisher.example values for third-party embeds. Use * only when you intentionally allow any parent. Multiple origins are space-separated.
  6. Call requestResize() after dynamic changes. When the embed fetches more comments or expands a panel, update the DOM, then call window.requestResize() once. Feature-detect with "requestResize" in window.
  7. Watch layout shift. Responsive iframes can shift content below the fold as the embed loads. Avoid placing them in the first viewport without a reserved min-height if Core Web Vitals matter for that page.
  8. Self-check. In a supporting Chrome build: load host + embed, confirm no inner scrollbar for tall content, expand dynamic content and confirm height updates after requestResize. In an older browser or with the feature disabled, confirm the fallback height still shows a usable iframe. Keep any existing postMessage height code until support is broad enough for your audience.

Reference: Chrome Developers blog “Responsive iframes in Chrome 154” (published 2026-09-16) and MDN pages for frame-sizing, responsive-embedded-sizing, and Window.requestResize().