我试图保持背景视频的中心,无论用户拖动视频多大.当我滚动较小时,它正在切断视频的右侧.这是我有的：
- <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;
- }
我希望视频的中心始终是页面的中心,即使双方被切断 – 这实际上是理想的,如果这样发生的话.感谢任何帮助.谢谢阅读！
解决方法
以下是我通常做背景视频的方式,以及我如何为
stre.am着陆页进行操作：
- .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%;
- }
