背景视频对齐

Question

谁能帮我把这个视频放在顶部对齐？

http://mystery-house.de/final/index.html

video#bgvid{
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
width:1440px;
height:auto;
z-index:-100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(../images/video.jpg) no-repeat;
background-size: cover;
}

 <video autoplay loop poster="http://mystery-house.de/final/_files/video/video.jpg" id="bgvid">
<source src="http://mystery-house.de/final/_files/video/mysteryhouse.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

Answer 1

您的变换样式设置为 50%。当我删除它时，背景图像覆盖了该区域。

如果您想调整背景图片的大小，您可以在 background-size 样式中指定宽度。您还可以尝试使用 background-position 将背景与 "top center"

对齐

Answer 2

您的转换导致在大屏幕上出现问题。您应该添加媒体查询来处理它。

  @media screen and min-width:1440px{take the transform out etc.}

背景视频对齐

Background Video Align

html

css

video

background