input license here

Responsive IFRAMEs

The HTML

To make your IFRAME responsive you'll need to wrap it in a <div>:
<div class="iframe-container">
<iframe width="1425" height="559" src="https://www.youtube.com/embed/BS4ojxHC1EM"></iframe>
</div>
The<div> will be the frame reactive frame of reference for the IFRAME.

The CSS

The parent <div> has an interesting set of CSS:
.iframe-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
The padding-top is the interesting bit; setting the padding-top to a percentage of height 9 / width 16 allows us to keep a desirable ratio.  This ratio matches a YouTube height to width ratio, but you can use any ratio to match the ratio of your IFRAME usage.
Next you define the IFRAME's CSS:
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
The IFRAME's CSS is unremarkable since the<div> does most of the work;  positioning the IFRAME as absolute and setting its width and height to 100% constrains the element to the DIV's reactive dimensions.
The CSS above is all it takes to turn a problematic, static IFRAME into a reactive element that's as easy to manipulate as an image.  Kudos to Gregory Gan for his amazing post and tip!
Diệp Quân
Nguyen Manh Cuong is the author and founder of the vmwareplayerfree blog. With over 14 years of experience in Online Marketing, he now runs a number of successful websites, and occasionally shares his experience & knowledge on this blog.
SHARE

Related Posts

Subscribe to get free updates

Post a Comment

Sticky