Question

我想使用HTML5制作背景视频，因此它会尽可能大地缩放，以便背景区域被背景视频完全覆盖，类似于background-size: cover;，但是视频。

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

修改

我的意思是background-size: cover;

很抱歉：/

Answer 1

您可以尝试使用

background-size: 100vw 100vh;

vw-屏幕的宽度
  vh-view屏幕高度

read this

Answer 2

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

Answer 3

您可以这样做，其行为类似于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>

Answer 4

我认为你在寻找的是：

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

Answer 5

您可以使用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;
}

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

5 个答案: