设置位置背景视频html5

Question

在全屏模式下，我想将我的视频设置在中间垂直位置。
我可以通过更改 video.fillWidth class 上的 bottom: 0; 或 top: 0; 将视频放在顶部或底部，但我无法将其设置在中间位置。

我愿意:

CSS :

.header-unit {
    position: relative;
    height: 600px;
}

video {
    display: inline-block;
}

#video-container {
    z-index: -1;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

video.fillWidth {
    bottom: 0;
    position: absolute;
    width: 100%;
}

@media (max-width: 1099px){
    video.fillWidth{
        height:100%;
        width:auto
    }
}

HTML :

<div class="header-unit">
    <div id="video-container">
        <video autoplay loop class="fillWidth">
            <source src="movie.mp4" type="video/mp4"/>
        </video>
    </div><!-- end video-container -->
</div><!-- end .header-unit -->

Answer 1

试试这个。

CSS:

video.fillWidth {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

设置位置背景视频html5

Set position background video html5

html

javascript

css

video