Method of iframe adaptation in web responsive layout

Problem <br />In responsive layout, we should be careful with iframe elements. The width and height attributes of the iframe element set its width and height, but when the width or height of the containing block is smaller than the width or height of the iframe, the iframe element will overflow:

Such overflowing iframe will destroy the layout of the page. We can find a way to make the iframe element responsive as well, so stay tuned.

Workaround
The iframe element itself cannot be stretched unless its width is explicitly set via js. However, we can wrap the iframe with an iframe-container element, make the width of the iframe-container element fill the width of the containing block, and set the padding-bottom percentage of the iframe-container element according to the aspect ratio of the iframe.

In fact, the essence of this method lies in setting the padding-bottom attribute of the iframe-container element. The purpose of setting this attribute is to set the height of the element in disguise. Because setting a percentage for padding-bottom is relative to the width of the parent element. If you set a percentage for the height attribute, it is relative to the height of the parent element. We usually use the default auto for the height value of the parent element, so the height of the child element will also be 0. Therefore, we can only set attributes for padding-bottom. This way, just let the iframe element fill the iframe-container.

The result shows the status:

When the viewport width is greater than 400px:

When the viewport width is less than 400px:

Summary <br />The above is the entire content of this article. I hope that the content of this article can bring certain help to your study or work. If you have any questions, you can leave a message to communicate.