html 更改视频封面,HTML5视频标签 - 如何设置封面背景大小

我需要到中心的视频，并使用它作为背景，所以我清理和增强Jagu给出了答案。它现在可选择将视频居中，并具有可选的颜色叠加层。

HTML

CSS

div {

/* This keeps the video inside the div */

position: relative;

/* These are optional based on the size of

the area you want the video to cover */

width: 100%;

height: 500px;

/* Color overlay on video, optional */

background-color: rgba(0, 0, 0, 0.5);

}

video {

position: absolute;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

/* This puts the video BEHIND the div, optional */

z-index: -1;

/* These two properties center the video, optional */

left: 50%;

transform: translateX(-50%);

}