Responsive fullscreen youtube video with no black bars?

Question

I have a fullscreen youtube video embedded on my website.

It looks good when the size of the browser is proportional to the video’s width and height. However, when I resize the browser to a different proportion, I get black bars around the video.

What I want is to have the video fill the whole window at all times, but without any stretching. I want the “excess” to hide when the browser size is not proportional to the video.

What I am trying to achieve is something you can see in the background of these two websites: http://ginlane.com/ and http://www.variousways.com/.

Is it possible to do this with a youtube video?

Solution 1

This is pretty old but people may still need help here. I needed this too so have created a Pen of my solution which should help - http://codepen.io/MikeMooreDev/pen/QEEPMv

The example shows two versions of the same video, one as standard and the second cropped and centrally aligned to fit the size of the full parent element without showing the hideous black bars.

You need to use some javascript to calculate a new width for the video but it's really easy if you know the aspect ratio.

HTML

<div id="videoWithNoJs" class="videoWrapper">
  <iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe>
</div>

CSS - The height and width o the videoWrapper can be anything, they can be percentages if you so wish

.videoWrapper {
  height:600px;
  width:600px;
  position:relative;
  overflow:hidden;
}

.videoWrapper iframe {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    bottom:0;
}

jQuery

$(document).ready(function(){
    // - 1.78 is the aspect ratio of the video
    // - This will work if your video is 1920 x 1080
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78
    var aspectRatio = 1.78;

    var video = $('#videoWithJs iframe');
    var videoHeight = video.outerHeight();
    var newWidth = videoHeight*aspectRatio;
    var halfNewWidth = newWidth/2;

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});

});

This can also be triggered on resize to ensure it remains responsive. The easiest (probably not most efficient) way to do this is with the following.

$(window).on('resize', function() {

    // Same code as on load        
    var aspectRatio = 1.78;
    var video = $('#videoWithJs iframe');
    var videoHeight = video.outerHeight();
    var newWidth = videoHeight*aspectRatio;
    var halfNewWidth = newWidth/2;

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});

});

Solution 2

Create a container div around the iframe code and give it a class eg:

<div class="video-container"><iframe.......></iframe></div>

Add in 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%;
}

This coolestguidesontheplanet.com is the Source URL of this answer.

Solution 3

To simulate the same effect, the important thing is to maintain aspect ratio which is 16:9.

HTML

<div class="banner-video">    
        <iframe  src="https://www.youtube.com/embed/XXlJXRXJhow?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1&amp;playlist=XXlJXRXJhow" frameborder="0" allow="autoplay; encrypted-media" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

CSS

iframe{
  width: 100%;
  height: calc((100vw*9) /16);
}

This will remove black bars.

Now we can set the outer container to 100% width and 100% height and hide the overflow.

.banner-video{
  height: 100vh;
  overflow: hidden;
}

Now the above code will work until viewport aspect ratio is greater than 16/9. So we have to add media query based on aspect ratio.

 @media (max-aspect-ratio: 16/9) {
    .banner-video{
      width: 100%;
      overflow: hidden;
    }

    iframe{
      width: calc((100vh*16)/9);
      height: 100vh;
      }
  }

After this youtube video will maintain full viewport size at all condition and hide the extra part of a video. Other then opera it's supported in all the browser.

Solution 4

I'm posting this because the answers above are for when you have the black bars at the top and at the bottom. What if you have the bars on the sides (left and right). This script will take care of the two scenario.

    var vidRatio = vidWidth/vidHeight;
var wrapperHeight = $('#videoIFrameContainer').height();
var wrapperWidth = $('#videoIFrameContainer').width();
var wrapperRatio = wrapperWidth / wrapperHeight;
if(wrapperRatio < vidRatio){
    var newWidth  = wrapperWidth  * (vidRatio/wrapperRatio);
    $('#videoIFrame').css({'min-height':wrapperHeight+'px', 'min-width':newWidth+'px', 'position':'absolute', 'left':'50%','margin-left':'-'+(newWidth/2)+'px'});

}
else{
    var newHeight  = wrapperHeight   * (wrapperRatio / vidRatio);
    $('#videoIFrame').css({'min-height':newHeight+'px', 'min-width':wrapperWidth+'px', 'position':'absolute', 'top':'50%','margin-top':'-'+(newHeight/2)+'px'});

}

Solution 5

If you're looking just for CSS (no JS).

Videos with 16:9 ratio such as 1920x1080 or 1280x720...

Here is my code (It's working in my case):

.video {
    position: relative;
    height: 0; 
    padding-bottom: 56.25%; /*16:9*/
    padding-top: 0; /* Use ZERO, not 25px or 30px and so on */
    overflow: hidden;
}

.video > iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

View more solutions