How to make an iframe responsive

Use width and aspect-ratio together

For video, maps, or any embed with a predictable shape, let the iframe fill its container and give it an aspect ratio:

<iframe
  src="https://example.com/embed"
  title="Product walkthrough"
  width="1280"
  height="720"
  style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0;"
  loading="lazy"
  referrerpolicy="no-referrer"
></iframe>

The width and height attributes describe the intended dimensions; CSS makes the actual box fluid. Choose an aspect ratio that suits the content rather than applying 16:9 to every widget. Use the iframe generator to create a version with your dimensions and sandbox settings.

A responsive box is not the same as responsive content

The page inside the iframe receives its own viewport. If that page has a fixed-width layout, narrowing the iframe will not automatically redesign it. Test several widths using the iframe tester, then fix the embedded page’s CSS if you control it.

The tester scales a pixel-sized preview to fit your screen. A 1280-pixel viewport stays 1280 CSS pixels inside the iframe; scaling the preview is only a viewing aid. This is not a mobile browser or touch-device emulator.

What about content that changes height?

An aspect ratio is a poor fit for a long form or document with unpredictable height. Give it a suitable fixed or minimum height and allow scrolling. A parent cannot read a cross-origin document’s height directly.

If you control both applications, the child can measure its content and send the height using postMessage. The parent must validate the message’s exact origin, check that its source is the expected iframe window, and clamp the supplied height before applying it. Do not accept arbitrary messages from every origin.

Keep the embed usable

• Give the iframe a meaningful title, such as “Office location map” rather than “iframe”.
• Lazy-load off-screen embeds. A critical above-the-fold embed may be better loaded eagerly.
• Grant only the sandbox and feature permissions the embed needs.
• Provide a normal link as a fallback when appropriate, especially for essential content.

Finally, check the target’s headers. Responsive CSS cannot resolve an embedding policy that blocks your origin. See how to fix refused-to-connect errors.

References: MDN aspect-ratio and MDN postMessage.