Force Vimeo Iframe center fit and full cover a slide in the background

Question

I'm trying to make a video iframe from vimeo fill a slide in the background. I found an answer that works if the video is not in a carrousel, but as soon as I add the rest of the slides the video wont fill the slide.

You can check the codepen here

If you resize the browser you can notice that black bars appear on the sides or on the top. The effect I'm trying to achieve is the one from the image on the first slide, fills the frame cropping the larger side.

I got some slides with text and background images:

<section id="content">
  <div class="slide" style="background:url('https://via.placeholder.com/2000x1000?text=Slide_00') no-repeat center center;">
    <div class="slide-text">
      <h2><span>Lorem</span></h2>
    </div>
  </div>

  <div class="slide">    
         <div class="slide-text">
      <h2><span>Lorem</span></h2>
    </div>

    <div class="video-background">
      <div class="video-foreground">
        <div class="video-wrapper">
          <iframe src="https://player.vimeo.com/video/251273391?background=1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
        </div>          
      </div>   
    </div>  
      </div>
</section>

CSS:

html,body {
  padding:0;
  margin:0;
}  

* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.slide {
  position:relative;
  height:100vh;
  border-bottom:3px solid black;
}

.slide-text {
  position:absolute;
  text-align:center;
  left:50%;
  bottom:50%;
  transform:translate(-50%,50%);
}

.next-slide {
  position:absolute;
  left:50%;
  bottom:1%;
}