Making iframes Responsive

Responsive iframes

iframes have fixed dimensions by default. The CSS aspect-ratio property makes them scale proportionally.

For full-width iframes, set width: 100% on the iframe and use a container with the correct aspect ratio.

Example

.iframe-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

CSS

Full Editor

Pro Tip

aspect-ratio is now supported in all modern browsers and is the cleanest way to make iframes responsive.