html - 我怎样才能防止我的背景视频扩展到比一个部分更远的地方？

Question

我有三个部分，但我的背景视频高度在第一部分中过高。作为返回，这切断了下面部分的一部分。所以基本上我只需要我的视频容器与我的第一部分大小相同。有什么想法吗？

我尝试更改最大高度，一起删除部分和各种其他 css 属性，但我的视频高度仍然太大。

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
}

section#home {
  width: 100% height: 100%;
}

section#work {
  background: url("https://images.unsplash.com/photo-1515724684585- 
 ec93c008b8b5?ixlib=rb- 1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1875&q=80") 
 no-repeat center center/cover;
}

section#contact {
  background: url("https://images.unsplash.com/photo-1487131765602- 
 9c2220588c4d?ixlib=rb- 1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3451&q=80") 
 no-repeat center center/cover;
}

.work_container {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.video_container video {
  min-width: 100%;
  min-height: 100%;
}

<div class="container">
  <nav class="navbar">
    <header>V E R T E X // D R O N E S</header>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#work">Work</a></li>
      <li>
        <a href="#contact"></a>Contact</li>
    </ul>
  </nav>
  <section id="home">
    <div class="video_container"></div>
    <video src="drone.mp4" loop autoplay muted></video>
  </section>
  <section id="work">
    <div class="work_container"></div>
  </section>
  <section id="contact"></section>
</div>

Answer 1

使视频成为 100% width 和 height 并使用 object-fit 设置它是否应该填充容器 (可能裁剪视频的一部分)使用cover作为值，或者如果它应该包含整个视频(不裁剪，但可能添加信箱)通过使用包含值。

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
}

#work {
  background: url("https://images.unsplash.com/photo-1515724684585-ec93c008b8b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1875&q=80") no-repeat center center/cover;
}

#contact {
  background: url("https://images.unsplash.com/photo-1487131765602-9c2220588c4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3451&q=80") no-repeat center center/cover;
}

.work_container {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#home video {
  width: 100%;
  height: 100%;
  object-fit:cover; /*or contain*/
}

<link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo+2:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css? 
family=Amatic+SC:400,700" rel="stylesheet">


<div class="container">
  <nav class="navbar">
    <header>V E R T E X // D R O N E S</header>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <section id="home">
    <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" loop autoplay muted></video>
  </section>
  <section id="work">
    <div class="work_container"></div>
  </section>
  <section id="contact"></section>
</div>