How to make a responsive youtube iframe video

To scale a YouTube video to fit any browser or tablet/mobile device for responsive design you can use either a CSS or Javascript solution to accomplish the goal.
This example uses a CSS solution, you need to add a couple of CSS styles in your main CSS file.
Here is what a typical YouTube embed code looks like, with fixed width and height:

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

It would be nice if we could just give it a 100% width, but it won’t work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):

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

And use the following CSS:

.container {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 .video {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

How this works: The container element is given a zero height and a percentage bottom padding. The percentage bottom padding is a percentage of the container width, so that gives it a fixed aspect ratio. But in order to get the iframe to show up inside the zero-height container, you need to make the container relative and the iframe absolute, positioned inside the div.

Leave a Comment

WhatsApp Logo Chat