How to Create: Responsive Iframe

Learn how to use CSS to create responsive iframes.

Responsive iframe

Create an iframe that maintains the aspect ratio (4:3, 16:9, etc.) when resizing:

What is Aspect Ratio?

The aspect ratio of an element describes the proportional relationship between its width and height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century) and 16:9 (the universal format for high-definition television and European digital television as well as YouTube videos).

How To - Responsive Iframes

Step 1 - Add HTML:

Use container elements, such as <div>, and add an iframe to it:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

Step 2 - Add CSS:

for padding-top Add percentage values to maintain the aspect ratio of the container DIV. The following example creates a container with a 16:9 aspect ratio, which is the default aspect ratio for YouTube videos.

Instance - 16:9 Aspect Ratio

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (9 divided by 16 equals 0.5625) */
}
/* Then set the iframe's style to fit the container div's full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

Try it yourself

Other Aspect Ratios

Instance - 4:3 Aspect Ratio

.container {
  padding-top: 75%; /* 4:3 Aspect Ratio */
}

Try it yourself

Instance - 3:2 Aspect Ratio

.container {
  padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

Try it yourself

Instance - 8:5 Aspect Ratio

.container {
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
}

Try it yourself

Instance - 1:1 Aspect Ratio (height and width are always equal)

.container {
  padding-top: 100%; /* 1:1 aspect ratio */
}

Try it yourself