With more people browsing websites on mobile devices, it is important to have a responsive layout for both mobile browsing and desktop browsing. It is also important for all media to be responsive, including making responsive iframes, otherwise they will bleed over into the right sidebar or become cut off when the browser is resized to a width that is smaller than what is defined in the iframe.
There are times when you grab iframe embed codes from sites where that code has a defined width and height, making the iframe not responsive on their own. But, with a little help from CSS, you can make turn those codes into responsive iframes without relying on plugins that can slow down your website.
Examples of Non-Responsive and Responsive iframes
Below is an example of a video, embedded using the iframe code provided via the video’s share button:
And here is the same video, embedded using the same iframe code but also making use of some CSS:
If you are viewing this post on a mobile device with a screen width less than 640 pixels, the first video is probably cut off, while the second fits your screen. If you are viewing this post on desktop, then make the browser smaller. Eventually, the top video will get cut off, while the bottom video automatically resizes to fit the width of the content container.
The Responsive iframe CSS
How do you do this? The first thing you’ll need to do is add the following to your website’s CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Then, when you embed the iframe, instead of (the code provided):
<iframe src="https://screen.yahoo.com/weird-al-yankovic-handy-parody-133702425.html?format=embed" width="640" height="360" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
You would use this code this:
<div class="videoWrapper"><iframe src="https://screen.yahoo.com/weird-al-yankovic-handy-parody-133702425.html?format=embed" width="640" height="360" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>
The bits of code that were added to turn a non-responsive iframe into a responsive iframe are:
<div class="videoWrapper"> </div>
The <div class=”videoWrapper”></div> will work with anything you are able to embed with iframes, such as web pages, though it will change the aspect ratio. The CSS code is designed to keep the video aspect radio of 16:9 when the iframe is in responsive mode.
Examples embedding a Web Page:
Non-responsive:
<iframe src="https://skookummonkey.com/shop/free-ssl-certificates-website-hosting-packages/" width="700" height="700" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
Responsive:
<div class="videoWrapper"><iframe src="https://skookummonkey.com/shop/free-ssl-certificates-website-hosting-packages/" width="700" height="700" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>
The Ideal Way to Make an iframe Responsive
This is simple: Don’t set a fixed width. If you are want to embed a web page, it’s not a problem.
With a web page, create a responsive iframe with the following code:
<iframe src="https://skookummonkey.com/shop/free-ssl-certificates-website-hosting-packages/" width="100%" height="700" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
It is important to set the width to 100%. The height can be any number you wish.
Skookum Monkey can design your custom mobile-friendly responsive WordPress theme today.