时间戳

首页 > 解决方案 > HTML 视频标签固定高度与对象适合

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

问题描述

我需要将视频放在父 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;
}

代码笔：

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

标签： htmlcss

解决方案

  • 容器.bkg是display:flexand align-items: stretch-- 这使得它的子标签 ( .vid) 垂直延伸到包含标签的边缘并符合max-height: 200px（通常这是真的，但这种特殊的布局是一个例外，见脚注1）

  • 分配object-fit: cover的视频将视频边缘设置为容器边缘而不会失真，如果其纵横比不适合其包含标签，它将根据需要将其边缘延伸到容器边界之外。也是object-position: center明确设置的。
    1这种特殊的布局有一个副作用，它在分配视频时会额外增加 20 像素的高度object-fit: cover。因此，高度.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>

推荐阅读