如何将视频缩放到尽可能大，以便背景视频完全覆盖背景区域

Question

我想使用 HTML5 创建一个背景视频，以便它尽可能大地缩放，以便背景区域完全被背景视频覆盖，类似于background-size: cover;，但对视频。

我希望它尽可能跨平台/浏览器。

编辑

我的意思是background-size: cover;

对此感到抱歉：/

Answer 1

您可以使用 transform 属性轻松执行此操作。它调整屏幕中心的视频，宽度属性用整个视频填充屏幕。

video { 
 position: fixed;
 top: 50%;
 left: 50%;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100;
 transform: translateX(-50%) translateY(-50%);
 background-size: cover;
}

Answer 2

你可以

尝试使用

background-size: 100vw 100vh;

大众 - 查看屏幕宽度
屏幕的 VH 视图高度

阅读此内容

Answer 3

您可以使用

宽度和高度属性并将其设置为 100%，或者如果百分比不适合您，则使用 vh 和 vw 单位

Answer 4

我认为您正在寻找的是：

video{
  object-fit:cover;
  width:100%;
  height:100%;
  }

Answer 5

你可以

这样做，它的行为类似于background-size: cover

html, body {
  margin: 0;
}
.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.video-container video {
  position: absolute;
  min-width: 100%; 
  min-height: 100%; 
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<div class="video-container">
  <video autoplay>
    <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
  </video>  
</div>