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!
Post a Comment
Post a Comment