Force Vimeo Iframe подходит по центру и полностью закрывает слайд на заднем плане

Question

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

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

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

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

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