How to set iframe adaptive in WEB

This time I will show you how to set up iframe adaptive in WEB. What are the precautions for setting iframe adaptive in WEB? The following is a practical case, let's take a look.

Question

In
Responsive layout, we should treat the iframe element carefully. 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 When the height is less than the width or height of the iframe, the iframe element will overflow:

Such an overflowing iframe will destroy the layout of the page. There is a way we can make the iframe element responsive as well, wait and see.

Solution

The iframe element itself cannot be retracted unless its width is set through js display. But we can wrap the iframe with an iframe-container element, let the width of the iframe-container element fill the width of the containing block, and set the
padding-bottom of the iframe-container element according to the aspect ratio of the iframe. percentage.

In fact, the essence of this method is to set 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 the percentage for padding-bottom is relative to the width of the parent element, if the percentage is set for the height attribute, it is relative to the height of the parent element, and we usually use the default auto for the height value of the parent element, so it will appear The height of the child element is also 0. Therefore, we can only set attributes for padding-bottom. This way, just let the iframe element fill the iframe-container.

.wrap{
           width: 400px;
           margin: auto;
           border: 5px solid greenyellow;
       }
       .iframe-container{
           height: 0;
           padding-bottom: 97.6%;
           position: relative;
       }
       .iframe-container iframe{
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
       }
       @media screen and (max-width: 400px) {
           .wrap{
               width: 300px;
           }
       }
<div class="wrap">
       <div class="iframe-container">
           <iframe height=498 width=510 src="<a href="http://player.youku.com/embed/XOTE0MjkyODgw">http://player.youku.com/embed/XOTE0MjkyODgw</a>" frameborder=0 allowfullscreen></iframe>
       </div>
   </div>

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use h5’s sse server to send EventSource events

How to implement the remember password function in h5

How to call APP function in H5 page

The above is the detailed content of How to set iframe adaptive in WEB. For more information, please follow other related articles on the PHP Chinese website!