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

前端之家收集整理的这篇文章主要介绍了css – Html5视频背景,将视频中心保持在中心位置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图保持背景视频的中心,无论用户拖动视频多大.当我滚动较小时,它正在切断视频的右侧.这是我有的: @H_301_2@<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着陆页进行操作: @H_301_2@.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%; }

猜你在找的CSS相关文章