Responsive fullscreen youtube video with no black bars?

Question

I have a fullscreen youtube video embedded on my website.

It looks goo

Answer 1

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

HTML

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.