设置位置背景视频html5

Question

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

我希望如此：

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%);
}