在全屏模式下,我想将视频设置在中间垂直位置。
我可以通过更改 video.fillWidth
上的 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 -->
最佳答案
试试这个。
CSS:
video.fillWidth {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
关于javascript - 设置位置背景视频html5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28728083/