Video background banner (not full page)

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.