Html5视频背景,保持视频中心位于中心 [英] Html5 video background, keep center of video in center
本文介绍了Html5视频背景,保持视频中心位于中心的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图让背景视频居中,无论用户拖动视频有多大。当我滚动较小时,它正在切断视频的右侧。这就是我所拥有的:
I am trying to keep a background video centered regardless of how big the user drags the video. It's currently cutting off the right side of the videos when i scroll smaller. Here's what I have:
<section id="home">
<div class="video_shader"></div>
<div class="video_contain">
<video autoplay="" loop="" poster="img/still.jpg" id="bgvid">
<source src="/realWebm.webm" type="video/webm" />
<source src="/realdeal.mp4" type="video/mp4">
<source src="/reaOg.ogv" type="video/ogg" />
</video>
</div>
</section>
.video_contain{
display: block;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
video {
min-width: 100%;
min-height: 100%;
z-index: -100;
background-position: center;
background-size: cover;
}
#home {
width: 100vw;
height: 100vh;
display:block;
position: relative;
}
我希望视频中心始终是页面的中心,即使双方被切断 - 如果它发生这种情况,这实际上是理想的。非常感谢任何帮助。感谢阅读!
I would like the center of the video to be the center of the page always, even if the sides get cut off - that's actually ideal if it happens that way. Would appreciate any help. Thanks for reading!
推荐答案
这里是我通常如何制作背景视频,以及我是如何为 stre.am 着陆页:
here's how I typically do background video, and how I did it for the stre.am landing page:
.video_contain {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}
这篇关于Html5视频背景,保持视频中心位于中心的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文