Home > Article > Web Front-end > 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 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. SolutionThe 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.
.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!