Css 背景视频

Question

有人知道如何居中这个视频背景吗？

我试过：

 margin: 0 auto;
text-align: center;

到目前为止，但这些都没有奏效。

这是我的代码。

网址：

 <video autoplay loop poster="polina.jpg" id="vid">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>

CSS：

 video#vid {
 position: fixed; right: 0; bottom: 0;
 min-width: 100%; min-height: 100%;
 width: auto; height: auto; z-index: -100;
 background: url(polina.jpg) no-repeat;
 background-size: cover;
 margin: 0 auto;
}

我如何将此视频背景居中，以便在调整窗口大小时它在左侧/右侧删除相同的数量？感谢您的帮助！

这是我的 jsfiddle：http: //jsfiddle.net/pwxcvxe8/2/

原文由 Stefan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于您使用的是 HTML5 元素，因此居中内容的最佳方法是将其放在相对容器中，然后让 CSS 像这样处理其余部分：

 <div id="Container">
    <video></video>
    <div></div>
</div>

body, html {
    height: 100%;
}

#Container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#Container video {
    position: absolute;
    left: 50%;
    top: 50%;
    /* The following will size the video to fit the full container. Not necessary, just nice.*/
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
}

#Container div {
    position: relative;
    z-index: 1;
}

当然，您可以将 <video> 替换为您想要居中的任何元素。因为您使用的是 video 元素，所以我忽略了较旧的浏览器，因为我猜他们无论如何都不会喜欢您的页面。您也 不必 使用 min- 值，它只会居中。

原文由 somethinghere 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

工作示例 object-fit: cover; 有关更多信息，请访问 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

 * {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.videobg {
  height: 100vh;
  overflow: hidden;
  position: relative; /* requires for to position video properly */
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover; /* combined with 'absolute', works like background-size, but for DOM elements */
}

 <div class="videobg">
  <video autoplay loop muted>
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
  </video>
</div>

原文由 focus.style 发布，翻译遵循 CC BY-SA 4.0 许可协议