Posted on: May 20, 2016
Written by: Mick Sherry
When it comes to creating responsive web design elements, the <iframe> is an element that can cause a real headache unless the proper steps are taken. Today I will quickly show you how to make your <iframe> responsive in this tutorial.
What is an iframe?
<iframe> is short for “Inline Frame” and is used to insert a <html> document inside another <html> document. This creates an easy and convenient way to add content to a website that is pulled from another website.
Why use iframes?
The <iframe> is popular when it comes to inserting common website content such as embedding youtube videos and social media news feeds as well as a myriad of other uses. With 60% of websites being accessed through a mobile phone, tablet or some other handheld device, responsive web design is very important to allow your website content to stretch and adjust automatically to every screen.
Let’s Go!
To get started we need to grab ourselves an <iframe>. For this tutorial I will use a random youtube video embed as my example.
<iframe width="420" height="315" src="https://www.youtube.com/embed/j1qtsLfZWWQ" frameborder="0" allowfullscreen></iframe>
In this state, the iframe code with produce an iframe that is 420px wide X 315px tall. It will stay at that size no matter what the happens to size of the viewport.
If you were to change the width to 100%, the <iframe> would correctly respond to changes in the width of the view port, however it would still need to have a fixed height which would not be responsive and result in the content being out of proportion on some screen sizes. If you remove the width and height value completely, the <iframe> will disappear from view.
The first step to making this <iframe> responsive is to wrap it in a container.
The HTML
<div class="responsive-video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/j1qtsLfZWWQ" frameborder="0" allowfullscreen></iframe>
</div>
The CSS
.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px; /*Height of the youtube video header*/
height: 0; /* Not needed as the iframe get its height from the padding bottom */
overflow: hidden; /*hides the video if it escapes outside the container*/
}
Note: The padding-bottom is set based on the videos aspect ratio. If the aspect ratio is 16:9 set the padding bottom to 56.25%. If the video aspect ratio is 4:3, set padding-bottom to 75%.
Now we just have to style the <iframe> itself.
.responsive-video iframe {
width: 100%; /*make sure video takes up 100% of the width*/
height: 100%;/*make sure video takes up 100% of the height*/
position: absolute; /*required because container has a height of 0*/
left: 0; /* correct the positioning */
top: 0; /* correct the positioning */
}
Conclusion
You have successfully created a responsive <iframe> that will display beautifully in any sized view port.
The full code from this tutorial can be viewed on my responsive iframe jsfiddle.