> For the complete documentation index, see [llms.txt](https://ploegert.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ploegert.gitbook.io/til/programmy/css/display-responsive-iframe-maintaining-aspect-ratio.md).

# Display Responsive iframe Maintaining Aspect Ratio

Generally when rendering an iframe, you'll specify the `width` and `height` properties to give it a fixed display size.

You can make the iframe responsively expand to the full width of its parent while maintaining its aspect ratio using a little CSS.

First, remove the `width` and `height` properties.

Second, add a wrapping iframe container:

```html
<div class="iframe-container">
  <iframe src="https://www.youtube.com/embed/7LDlUMMbv6k" ...></iframe>
</div>
```

Third, sprinkle on a little CSS to make it responsive:

```css
.iframe-container {
  position: relative;
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
}

.iframe-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 0;
}
```

Ben Marshall has a whole [guide to responsive iframes](https://www.benmarshall.me/responsive-iframes/).