3

I am working on a responsive Youtube video embed. I am able to make it responsive based on code available from internet. However, when the video width is small, the height is not 100%. I want the height to be 100% all the time. So that when the width is small, video doesn't stick to top, leaving the bottom part empty. I understand that it will have black bars on top and bottom when width is small, but I am fine with that.

I found one site having it. It can be observed on this page, that when the width is reduced, video moves to centre instead of sticking to top.

Here is my HTML:

<div id='wrap-player'>
    <div class="video-container">
        <div id="player"></div>
    </div> 
</div>

And the CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

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

#wrap-player {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

I have created a Fiddle for that.

skjoshi
  • 2,493
  • 2
  • 27
  • 38
  • possible duplicate of [Shrink a Youtube video to responsive width](http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) – davidcondrey Oct 04 '14 at 23:57
  • I have already added what was there in my question. I was already using same trick it was shrinking to a certain amount. – skjoshi Oct 06 '14 at 13:40

4 Answers4

6

There is no need to over engineer this, all you need is:

FULL CODE for FULLSCREEN

CLICK FOR DEMO

CSS

html,body{ margin:0; padding:0; height:100%; width:100%; }
#wrap-player{
    height:100%;
    width:100%;
    overflow:hidden;
}

HTML

<div id="wrap-player">
     <iframe width="100%" height="100%" src="//www.youtube.com/embed/d__QncYv3VU" frameborder="0" allowfullscreen></iframe>
</div>

Explanation

enter image description here

  • margin/padding: 0

Often referred to as a global reset. This process simply sets defaults for margin and padding and therefore eliminates any browser specific defaults which often vary.

  • html: 100%

By default the html of a page is only as high as the content it contains. Setting the html's height to 100% will cause the height to become the height of the browsers visible area.

  • body: 100%

The body follows the same rendering principals as the html. By setting height 100% we ask the body to fill the height of its container, in this case that is the html.

  • site div: 100%

It is generally a nice practice to have a master div that wraps the entire website, granting full control over the layout without over manipulating the body tag. Setting height 100% will make the div fill the height of its container, in this case the body tag.

From here on there is a cascading effect that will allow any subsequent block level content to fill the height of its container. This will always be 100% unless we set it other wise.

Any block level element with a height of 100% placed inside the content div as in the image will only ever become the height of its container and as such will not fill the screen.

(Note: making an element position fixed/absolute will remove it from the document flow. In most cases its container and therefore its height will be determined by the next relative positioned parent element encountered.)

  • overflow: hidden

By default even when an element has no scroll, scrollbars will often still be shown. Setting overflow hidden simply removes the overflowing content and consequently the scrollbars. As content is never going to overflow in this instance, they are not necessary.

  • iframe: 100%

Youtube uses iframes to embed its video content and so setting the height to 100% will make the height of the iframe and subsequently the video within the height of its container.

I recommend setting the height to 100% on the iframe itself as above and not in css for two reasons:

  1. If you have more than one iframe in your website the height will be set for them all. If this is desired then that is not a problem.

  2. When copying embed code from youtube a default height and width is always set. iframes should have a height and width attribute applied to them directly. I personally do not think setting a height/width and then overwriting with css is good practice.

(Note: This is contrary to my own opinion that all styling should be done within css)

If all parent containers above the iframe are set to 100% all the way up to the html element; the video will be the height of the browsers visible window.

DreamTeK
  • 32,537
  • 27
  • 112
  • 171
5

I modified the css of your setup a bit. the video and every parent has 100% height so it will always be 100% height. http://jsfiddle.net/me2loveit2/R6e7j/5/

html, body, iframe, #wrap-player, .video-container, #player{
    width:100%;
    height:100%;
    margin:0px;
    overflow:hidden;
}
Philipp Werminghausen
  • 1,142
  • 11
  • 29
2

you check the demo here http://jsfiddle.net/zLc2s/1/

you need to calculate the document height and adjust the height of the player according to the new height.

$(document).ready(function () {
    $('.video-container').css('height', $(window).height());
});
Usman Khawaja
  • 809
  • 14
  • 28
0

It's very easy to do, using vh units:

iframe {
    width: 100%;
    height: 100vh;
    display: block;
}

Here is the updated fiddle.

(Sometimes the simplest solution is the best)

user1429980
  • 6,872
  • 2
  • 43
  • 53