How to make Youtube Iframe Responsive

March 5, 2016 2:45 pm Published by Leave your thoughts

The default Youtube video iframe embed code is anything but elegant and will break most responsive web designs if you try to embed a Youtube video on your website. Fortunately there’s a workaround for everything and we can easily turn any Youtube embed responsive using some simple CSS magic. Here’s how:

Youtube embed responsive

When you use the original iframe embed code the result may look something like this, where the red box is just a normal wrapper and our video is breaking outside of it:

Responsive iframe embed code not fitting

To counter this, the first thing we do is remove the fixed width and height from the Youtube iframe code altogether. We won’t be needing these any more!

<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>

Then we place the entire iframe inside a relatively positioned container and absolute position our Youtube video inside of that wrapper like so:


.wrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
.wrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;


<div class="wrapper">
 <iframe src="" frameborder="0" allowfullscreen></iframe>

The result is an elegant Youtube video that no longer breaks our fluid website design and will fit inside any parent container perfectly.

Youtube embed responsive fitting container

Tool to make iframe responsive

It can get quite tedious to manually have to do this every time you need to make a Youtube iframe responsive or have to publish a fluid youtube video quickly on your blog so I have built a neat little online tool especially for You! (and for me for that matter).

Using this tool You can make Youtube video responsive simply by entering the URL of your video and clicking submit. The generator will output the above code with your video embedded responsively inside the wrapper just like I explained in this article.

If you think this is pretty neat why don’t you hit the like and share buttons below and help me out a little? 😉


In category: , ,

This post was written by ynef