Web designers and developers often experience challenges every day. Like me whenever I sit and work for a web design, I learn new things. Today, I will share my experience on how I have learned to make an iframe responsive for YouTube embeds.
I remember when I have created a site which uses an iframe from YouTube embeds, responsiveness of it is not working properly. The video is adjusting normally but the iframe’s height is not adapting to its video size. It points me to realize that iframes by default is not fully responsive in screen sizes. Take for example the embedded iframe YouTube video below.
Oh, it hurts! How can I actually make it fully responsive making it proportionally adjusts according to screen sizes? Well, I have learned to make it work. I have written a simple solution for it using a simple CSS techniques.
The Markup for Responsive Iframe
By default if you are going to embed YouTube videos, you will find an iframe on it, like the example below. Please take note that you don’t have to remove the width and height properties for this. If you want to add your maximum video size, you can adjust its width and height according to your preferences.
<iframe width="420" height="315" src="https://www.youtube.com/embed/6vU7SzCdpuM" frameborder="0" allowfullscreen></iframe>
First thing to do to make it responsive according to ratio, add a simple markup using <div> tag. You can change your maximum width and height according to your preferences. In my case, I change the default width of 420 to 730 and its height from 315 to 548.
<div> class="wise-iframe-wrapper"><iframe width="730" height="548" src="https://www.youtube.com/embed/6vU7SzCdpuM" frameborder="0" allowfullscreen></iframe></div>
The CSS for Responsive Iframe
This is where the iframe is adjusted proportionally. Add the CSS properties below to make the embedded iframe responsive. If you are going to look on the code, I’ve added to the wrapper a positioning that is relative, padding on the bottom of 56.10%, height of 0 and a hidden overflow. Aside from that, I’ve added an iframe, object and embed attribute having a position absolute, top: 0, left: 0, width: 100%, and height: 100% which do a lot of the tricks.
.wise-iframe-wrapper {
position: relative;
padding-bottom: 56.10%;
height: 0;
overflow: hidden;
}
.wise-iframe-wrapper iframe,
.wise-iframe-wrapper object,
.wise-iframe-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The Result for Responsive Iframe
As you can see on the sample embedded iframe YouTube video below, it is now proportionally responsive. The video and iframe is now synchronize in terms of responsiveness. If you want to test it, resize your browser’s window or use a mobile device.
Conclusion
By default, if you are going to embed an iframe videos from a video hosting site like YouTube, you will see that it is not responsive enough to adapt on screen sizes because its height stays the same. But worry no more on the responsiveness of your embedded iframe videos using a simple CSS techniques we have written on this article. We have done some simple steps to make it possible using a wrapper markup and a CSS code. And by the way, it is not only restricted to YouTube videos, this is actually working on other video hosting site with an iframe embeds.
On my own experience, this works nicely on my web design. Does this CSS techniques works on you? Feel free to post your thoughts about it by adding your comments below.
