How to make Youtube Video responsive?

Question

I am creating a video site and want to make video responsive. I had created a class

.video {
    float: left;
    width: 90% !important;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-right: 5%;
    margin-left: 5%;
    border: 0px solid #FFF;
    height: 550px !important;
    box-shadow: 1px 1px 3px #555;

and had gives to youtube video code i.e. Iframe code as per following

<iframe src="https://www.youtube.com/embed/MRk5HynHe44" frameborder="0" class="video" allowfullscreen></iframe>

Tell me if any thing missing or any other tricks to make this video more responsive.

score 3 · Accepted Answer · answered Mar 09 '15 at 10:37

I enclose the video iframe in a div.

<div class=youtube-container>
     <iframe src="https://www.youtube.com/embed/MRk5HynHe44" frameborder="0" allowfullscreen></iframe>
</div>

I use some CSS to make that div responsive such that it is wide as it can be, and always maintains the 16:9 aspect ratio. Then I use CSS to make the YouTube iFrame take up the whole container:

.youtube-container {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.youtube-container iframe,.youtube-container object,.youtube-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

How to make Youtube Video responsive?

1 Answers1