Принудительное размещение Vimeo Iframe по центру и полное покрытие слайда в фоновом режиме

Я пытаюсь сделать видео iframe из vimeo, заполняющим слайд в фоновом режиме. Я нашел ответ, который работает, если видео не в карусели, но как только я добавляю остальные слайды видео не заполняет слайд.

Вы можете проверить codepen здесь

Если вы измените размер браузера, вы заметите, что по бокам или сверху появляются черные полосы. Эффект, которого я пытаюсь добиться, - это эффект изображения на первом слайде, который заполняет рамку, обрезая большую сторону.

У меня есть несколько слайдов с текстом и фоновыми изображениями:

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