Question

我正在弄清楚是否还有其他方法/技术可以适应背景视频，该背景视频的长宽比很大，可以在目标页面上完整显示而不会被裁剪。目前，我发现的唯一解决方案是将object-fit:cover添加到视频元素。它成功了。但是，它与Internet Explorer不兼容。我正在使用的视频的真实纵横比是3840X2160。我已经尝试过在视口中将width和height属性添加到父元素，但这没有用。

下面是我当前的代码。

HTML

<div class="v-header container">
    <div class="fullscreen-video-wrap"> 
        <video src="video1.mp4" autoplay muted loop></video>
    </div>
</div>

当前CSS

.fullscreen-video-wrap video{

position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:-1;

}

带有解决方案的上一个CSS代码，带有object-fit:cover

.fullscreen-video-wrap video{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
z-index: -1;
object-fit: cover;          
}

Answer 1

考虑尝试使用CSS vw（视图宽度）和/或vh（视图高度）。像我下面所做的那样使用这些单位，不应裁剪（尽管它们可能必须滚动以查看完整高度，并将其设置为auto）。我用图像而不是视频来测试您的代码，因为我手头没有该分辨率的视频。

.fullscreen-video-wrap video{
  position: absolute;
  max-width: 100vw;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:-1;
}

.fullscreen-video{
  width:100%;
  height:auto;
}

这是我尝试过的Codepen，因此您可以尝试一下：https://codepen.io/gemiller/pen/PXqpYQ。您还可以在此处了解有关vh / vw的更多信息：https://www.w3schools.com/cssref/css_units.asp

如何制作宽高比大的背景视频以适合窗口屏幕而不被裁剪？

1 个答案: