强制Vimeo Iframe中心适合并在后台覆盖一张幻灯片

Question

我正在尝试通过vimeo使视频iframe填充背景幻灯片。我找到了an answer that works if the video is not in a carrousel，但是一旦我添加了其余幻灯片，视频就不会填满幻灯片。

您可以检查代码笔here

如果调整浏览器的大小，您会注意到黑边出现在侧面或顶部。我要实现的效果是第一张幻灯片中的图像，填充了较大的一面。

我有一些带有文字和背景图片的幻灯片：

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