How CSS enables iframe to achieve adaptive height effects

Nowadays, more and more people use mobile phones to browse the web, so the responsiveness of the website is becoming more and more important. While testing the site on mobile, it took a lot of trying to figure out why my videos weren't working as I expected, until I discovered a great CSS trick that allowed the iframe to have an adaptive height. Next, I will share with you the method of dynamically realizing custom height of iframe. Interested friends can refer to it.

iframe adaptive height

For demonstration purposes, this article will use a video embedded in our iframe. First, visit the video URL, click "Share" under the video, and then click "Embed". The specific code is as follows:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

Next, we need to delete width="560" height="315", because here Is to set the size of the iframe. Since we need to set the dimensions ourselves, we don't need to do this.

After using CSS

we need to put the iframe in a

of another html element, this is very important because this element will resize your iframe size. Then add CSS classes to the wrapped element and a class to the iframe as shown below.

<div class="resp-container">
    <iframe class="resp-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

Define the wrapper class using the following style:

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

position: relative and iframe position are very important here. position: relative so that later we can associate the iframe with the wrapping element. This is because in CSS, position: absolute positions an element based on the closest non-static parent element.

overflow: hidden Whether to hide any elements that may be placed outside the container.

padding-top: 56.25% This is the key. In CSS, the padding-top property can be set to a percentage, which keeps our iframe in the correct proportions. By using percentages, it will calculate the padding to use based on the width of the element. In our example we want to keep a ratio of 56.26%, other ratios can be used as well.

Define the iframe class as follows:

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

position: absolute; This will give the iframe a position relative to the wrapper and place it on the wrapper's padding.

top: 0 and left: 0 are used to position the iframe in the center of the container.

width: 100% and height: 100% make the IFRAME take all the wrapped space.

When finished, you should get a responsive iframe.

Summary: In this article, we have seen the techniques that allow iframes to achieve adaptive height. As you can see, it's actually pretty simple and hopefully this post will save you hours of trying.

[Related tutorial recommendations]

1, CSS tutorial

2, What is