HTML 背景视频调整为响应式屏幕尺寸

Question

我的 HTML 背景视频有问题。我在 Stack Overflow 上找到了一些文章，并将其添加到我的 HTML 和 CSS 中。但它似乎不起作用，它要么不会响应，要么会与我的其他 div 和元素混淆。

我有一张图片: (视频元素的容器背景色为黄色)

代码如下:

.container {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   box-shadow:  0px 10px 24px 0px rgba(50, 50, 75, 0.49);
   font-size: 0;
   background-color: yellow;
   margin: auto;
   z-index: -1000;
}

.container video {
   min-width: 100%;
   min-height: 100%;

   width: auto;

   position: absolute;

   height: auto;
   max-height: 100%;
   width: 100%;
}

如您所见，视频宽度不会根据屏幕尺寸进行调整。我试过 object-fit 但这会使它没有响应。

Answer 1

诀窍是让您的容器 height: 0 然后将视频的宽高比作为 padding-bottom 应用到容器上。您可以通过将高度除以宽度并乘以 100 得到一个百分比值来获得视频的纵横比。然后放置您的视频以占据容器中的整个空间。

我示例中的视频是 320x176。 (176/320) * 100 = 55%。

* {margin:0;}
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49);
  font-size: 0;
  background-color: yellow;
  margin: auto;
  z-index: -1000;
  padding-bottom: 55%;
}

.container video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

<div class="container">
  <video src="https://www.w3schools.com/html/mov_bbb.mp4" loop autoplay></video>
</div>