html5 video 背景透明,你能将HTML5 <video>显示为全屏幕背景吗？

我可能有点迟，以回答这个问题，但这对于寻找答案的新人很有用。

上面的答案很好，但要获得完美的视频背景，您必须检查宽高比，因为在调整屏幕大小或在不同的屏幕尺寸上使用屏幕时，视频可能会剪切或画布四周变形。

我不久前进入了这个问题，我找到了使用媒体查询的解决方案。

我将在这里添加代码，以及：

HTML：

CSS：

.videoBgWrapper {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

overflow: hidden;

z-index: -100;

}

.videoBg{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

@media (min-aspect-ratio: 16/9) {

.videoBg{

width: 100%;

height: auto;

}

}

@media (max-aspect-ratio: 16/9) {

.videoBg {

width: auto;

height: 100%;

}

}

我希望你觉得它有用。