Make Fixed-Size Iframes Fit Narrow Containers

.demo-frame {
  width: 640px;
  height: 360px;
}

.demo-frame {
  inline-size: 100%;
  max-inline-size: 640px;
  block-size: auto;
  aspect-ratio: 16 / 9;
}

Root cause

An iframe is a replaced element whose outer box is sized by the embedding page. Its nested document does not make a fixed 640-pixel outer width responsive. When that authored width is larger than the containing block, the iframe itself contributes to page-level horizontal overflow.

The nested document and the outer iframe are separate sizing contexts. The outer page must constrain the iframe box. A preferred aspect ratio then relates its responsive inline size to its block size.

Inspect both sides of the embed boundary

First measure the outer iframe rectangle from the host page. If its right edge crosses the article boundary, fix the host sizing before debugging the nested document. Then inspect the embedded experience at the resulting narrow size: its own controls, text, focus order, and internal scrolling can still fail even when the outer 16:9 box fits perfectly.

Record who owns each layer. The host page controls the iframe dimensions, accessible title, loading strategy, sandbox, and allow permissions. The embedded provider controls its internal responsive behavior and data processing. The project fixture keeps both layers local so its geometry result is reproducible, but a production review must test the actual provider and disclose its privacy behavior.

When this fix is not enough

Responsive dimensions do not make the embedded document accessible, secure, or fast. Production embeds still need an accurate title, appropriate sandbox and permissions policies, a loading strategy, and a provider whose own content works at the resulting size. Some embeds need a wrapper when supporting older layout code or a maximum width smaller than the article.

Regression condition

At 320 and 375 CSS pixels, the failing iframe must create positive page-level overflow. The fixed iframe must remain inside the page, render no wider than 640 pixels, and preserve a 16:9 rendered ratio in every recorded browser.