4

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.

1
  • This question appears to be off-topic because it is about programming which is off-topic at Pro Webmasters. Programming questions may be asked at Stack Overflow but be sure to read their FAQ before posting to ensure your question meets their guidelines.
    – John Conde
    Mar 9, 2015 at 14:46

1 Answer 1

3

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%;
}
6
  • Can You explain me any thing about code: .youtube-container iframe,.youtube-container object,.youtube-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Mar 9, 2015 at 10:48
  • That is what causes the iframe to take up the entire container. Because the only way to maintain aspect ratio in CSS is to use padding, the contents of the container wouldn't show unless they overlapped that padding. To do so, it uses absolute positioning relative to the container. Mar 9, 2015 at 10:57
  • Thank You So much, one more help I want i.e. I want to reduce youtube-container width 90% instead of 100. I change it and also set margins of 5% at left and right but it showing extra space at left side and it also going from up side of my header which is fixed in css. Please, Guide me. Mar 9, 2015 at 11:07
  • Set the width to 90% and then the left and right margin to auto: margin: 0 auto; Mar 9, 2015 at 12:43
  • I believe HTML5 iframe border="0" is obsolete and will fail w3c validation. So a quick fix for that would be using CSS iframe{border:0;}. Mar 9, 2015 at 13:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.