HTML视频标签固定高度与对象适合

Question

我需要将视频放在父div中以匹配其（div）的维度。具体来说，我正在寻找全宽和固定高度。下面的代码似乎不起作用。

HTML：

<div id="video-bg">
  <video autoplay muted loop>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
</div>

CSS：

#video-bg {
  width: 100%;
  height: 200px;
}

div#video-bg video {
  object-fit: cover;
}

Codepen：

https://codepen.io/aartiik/pen/ErJRJK

Answer 1

• 容器.bkg是display:flex和align-items: stretch - 这使得它的子标签（.vid）垂直伸展到包含标签的边缘并符合max-height: 200px（通常这是真的，但这个特殊的布局是一个例外，见脚注1）
• 视频被分配object-fit: cover，它将视频边缘设置到容器的边缘而没有失真，如果它的纵横比不适合其包含的标签，它将根据需要将其边缘延伸超过容器边界。 object-position: center也是明确设定的。 1这种特殊的布局具有副作用，因为当视频被分配object-fit: cover时，它会增加额外的20px高度。因此，.bkg的高度为180px作为偏移量。将object-fit设置为fill将解决该问题。

---

演示

:root {
  font: 400 16/1.3 Consolas;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
}

.bkg {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-height: 200px;
  height: 180px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

.vid {
  display: block;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

<div class="bkg">
  <video class='vid' autoplay muted loop playsinline>
    <source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'>
  </video>
</div>

Answer 2

为您的视频添加课程，然后为视频设置样式：

HTML：

<div id="video-bg">
  <video class="vid" autoplay muted loop>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
</div>

CSS：

#video-bg {
  width: 100%;
  height: 200px;
}

div#video-bg video {
  object-fit: cover;
}
.vid{
  width: 100%;
  height: 100%;
}