Html5视频背景,保持视频中心在中心

Question

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

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

我希望视频的中心始终是页面的中心,即使侧面被切断 - 如果它以这种方式发生,这实际上是理想的.非常感谢任何帮助.谢谢阅读!

Answer 1

这是我通常如何做背景视频,以及我是如何为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%;
}

Answer 2

这个更短,适合我.

video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(calc((100% - 100vw) / 2));
}

Answer 3

在我的用例中,我总是希望视频覆盖整个视口(无论视口宽高比是大于还是低于视频),上述解决方案都无法完全按照我的意图工作.相反,以下工作更好:

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.video-container > video {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media screen and (max-aspect-ratio: 1920/1080) {
  .video-container > video {
    height: 100%;
  }
}
@media screen and (min-aspect-ratio: 1920/1080) {
  .video-container > video {
    width: 100%;
  }
}

我的视频是1920x1080,这适用于IE11(没有测试更低)和更高.

Answer 4

  .bg-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  .bg-video-wrap > video,
  .bg-video-wrap > iframe {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
  }

Answer 5

使用object-fit: cover;

video {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  object-fit: cover;
}

Answer 6

聚会迟到了，但我想给出 2020 年的答案。这是一个简单的解决方案，它可以让您拥有一个既居中又响应的 HTML 视频，而无需“固定”定位。它可以让您从全屏介绍开始，并在您开始滚动时添加一些文本。没有滚动条，没有烦人的东西。就如此容易。

https://codepen.io/LuBre/pen/GRJVMqE?editors=1100

CSS

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  height: 100%;
  font-Family: Arial;
}

.video-container {
  display: grid;
  justify-items: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.video-container video {
  position: absolute;
  z-index: 1;
  top: 50%;
  left:50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%) translateY(-50%);
}
.video-text {
  z-index: 2; 
  color: #fff;
  text-align: center;
}
.video-container h1, .video-container h2  {
  margin: 0;
  font-size: 3rem;
}
.video-container h2  {
  font-size: 1.4rem;
  font-weight: normal;
  opacity: 0.6;
}

.page-content {
  line-height: 1.4rem;
  padding: 2rem;
}

HTML

<div class="video-container">
  <video autoplay muted loop>
    <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  </video>
  <div class="video-text">
    <h1>Catchy title</h1>
    <h2>Everyone loves catchy titles</h2>
  </div>
</div>

<div class="page-content">
<h1>New paragaph</h1>
Some random text goes here...

Answer 7

就像任何其他具有绝对位置的元素一样将其居中

.video_contain {
    position: absolute;
    width: auto;
    min-height: 100%;
    min-width: 100%;
    left: 50%;
    transform: translate(-50%);
}