Question

我希望将我的视频背景设为： 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;
}

Answer 1

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

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

Answer 2

将这些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/

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

Answer 3

如果您想使某些内容水平居中，请这样做

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

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

响应背景视频

3 个答案: