Video background banner (not full page)

Question

I'm building a website with a video banner from youtube but I don't know how to achieve this.

For now I have this:

#video-background {
  position: absolute;
  right: 0;
  top:135px;
  left:0;
  bottom: 0;
  width:100% !important;
  width: auto; 
  height:50vh;
  min-height: 550px;
  z-index: 99;
}

<div id="video-background">
  <iframe frameborder="0" height="100%" width="100%" 
    src="https://www.youtube.com/embed/.....">
  </iframe>
</div>

But now I have very large black borders aside of the video on bigger screens and it is not responsive at all.

Answer 1

You need to reserve space with the containing element and then absolutely the child (iframe).

Try this CSS:

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* This reserves a 16:9 space */
    padding-top: 25px;
    height: 0;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

and this HTML:

<div id="video-background">
    <div class="video-wrapper">
        <iframe frameborder="0" src="https://www.youtube.com/embed/.....">
        </iframe>
    </div>
</div>

Code taken from: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php