响应式背景视频答案

【问题标题】：Responsive Background Video响应式背景视频
【发布时间】：2015-04-09 07:26:34
【问题描述】：

我希望我的视频背景是这样的： http://www.teektak.com/

我遇到的问题是我的视频是响应式的，但它固定在左侧。我一生都想不出如何让它在调整时水平居中于窗口。

这里是测试站点的链接，看看我在说什么：https://robotplaytime.paperplane.io/

HTML

<body>
    <video poster="images/robotPlaytimeVideo.png" id="bgvid" autoplay loop muted>
        <source src="images/robotPlaytimeVideo.mp4" type="video/mp4">
    </video>
</body>

CSS

html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
video { 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
    background: url(../images/robotPlaytimeVideo.png) no-repeat;
    background-size: cover;
}

【问题讨论】：

Best way to center a <div> on a page vertically and horizontally?的可能重复
将其包装在一个 div 中并使用该 css 仍将视频锚定到左上角。还有其他建议吗？谢谢
您可能不需要 div，只需将视频居中，就好像它是一个 div 一样
试过了，没有改变响应能力。它仍然固定在左上角。
试过什么？链接页面上有 16 种不同的方法/答案。

标签： css html

【解决方案1】：

将这些 CSS 规则添加到您的正文（视频的父容器）：

text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */

将这些 CSS 规则添加到您的视频中：

display: inline-block;
position: relative; /* allows repositioning */
left: 100%; /* move the whole width of the image to the right */
margin-left: -200%; /* magic! */

其中大部分内容直接来自 Bryce Hanscomb 对另一个类似问题的回答：How to center crop an image (<img>) in fluid width container

这是一个 jsfiddle 以防万一： http://jsfiddle.net/pLj0gcpu/

（请注意，此小提琴中的标记和样式是从您给定的 URL 中提取的）

【讨论】：

谢谢，我想通了。您的答案与我的答案足够接近。再次感谢

【解决方案2】：

要让视频占据整个屏幕尺寸：

video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

【讨论】：

这样做会给我空白。我当前的代码给了我全屏效果，但它固定在左上角。效果应该类似于：teektak.com。例如，当您调整先前链接的宽度时，它会使视频居中。当您调整高度时，它会将视频垂直对齐在中间。
你的父容器是否设置为 position: relative; ?
不，但我刚刚尝试过，它给我留下了空白。这里是网站：robotplaytime.paperplane.io

【解决方案3】：

如果你想水平居中响应，那么做

left: 50%;
transform: translateX(-50%);

注意，您还需要设置“位置”

【讨论】：