Responsive fullscreen youtube video with no black

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?

Answer 1

I spent a lot of time trying to figure this out but here's a simple CSS solution that works for me using Flexbox. Basically, put the video in a container with position absolute and width and height 100% and the make it display:flex and center the content!

https://medium.com/@rishabhaggarwal2/tutorial-how-to-do-full-screen-youtube-video-embeds-without-any-black-bars-faa778db499c

Answer 2

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

Answer 3

• Check this: Fullscreen video without black borders
• Or this: http://avexdesigns.com/responsive-youtube-embed/
• Or this one: http://css-tricks.com/fluid-width-youtube-videos/