css – Html5视频背景,将视频中心保持在中心位置

我试图保持背景视频的中心,无论用户拖动视频多大.当我滚动较小时,它正在切断视频的右侧.这是我有的：

<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%;
}

原文地址：https://www.jb51.cc/css/217252.html