我试着在我的网站上放一个视频。它应该始终覆盖整个屏幕。如果视频在侧面或底部被剪切,也没问题。视频最重要的部分在顶部中间。 如果您希望视频的中心始终可见,我已经找到了一个非常有效的代码。但我希望顶部(和中间)可见。
这是我当前的代码。
.vidwrap {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
overflow: hidden;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
height: auto;
width: auto;
display: block;
}
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="video/background-video.mp4" type="video/mp4">
</video>
</div>
在此代码中,顶部保持可见,但不再居中对齐:
.vidwrap {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: blue;
}
video {
position: relative;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="video/background-video.mp4" type="video/mp4">
</video>
</div>
我无法将这些代码放在一起。你能帮助我吗?
最佳答案
试试这个:
.vidwrap {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #00f;
}
video {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-0);
}
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="https://www.rmp-streaming.com/media/bbb-360p.mp4" type="video/mp4">
</video>
</div>
关于html - 背景全屏视频位置 : top center,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49687818/