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

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

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

Answer 2

容器.bkg是display:flex和align-items: stretch －使其子标签（.vid）垂直延伸到包含标签的边缘并符合max-height: 200px（通常是正确的，但是这种特殊布局是一个例外，请参见脚注¹）
为视频分配了object-fit: cover，可将视频边缘设置到容器的边缘而不会变形，并且如果视频的宽高比不适合其包含的标签，则视频的边缘将延伸到容器之外边界根据需要。还明确设置了object-position: center。
^{¹这种特殊的布局有一个副作用，即在为视频分配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>

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

2 个答案:

演示