CSS背景视频 [英] Css background video

问题描述

有人不知道如何中心这个视频的背景？

Does someone know how to center this video background?

我试过：

margin: 0 auto;
text-align: center;

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

So far but none of these worked.

这是我的code。

HTML：

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

我如何中心这个视频的背景，因此在左/右侧的相同数量的删除，如果你调整窗口的大小？感谢您的帮助！

How do i center this video background so it removes on the left/right side the same amount if you resize the window? Thanks for helping!

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

Here is my jsfiddle: http://jsfiddle.net/pwxcvxe8/2/

推荐答案

由于您使用的是 HTML5 元素居中内容的最好办法是把它放在一个相对容器中，然后让CSS处理其余部分是这样的：

Since you are using an HTML5 element the best way to center content is to put it in a relative container and then let CSS handle the rest like this:

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

通过要居中当然，任何元素;

您可以替换＆lt;视频过夜。由于您使用的是视频元素，我忽略了旧的浏览器，我想他们无论如何也不会喜欢你的页面。您还没有的有无以的使用分钟 - 值，它只是中心。

You can replace <video> by any element you want to center, of course. Because you are using the video element I'm ignoring older browsers as I guess they won't like your page anyway. You also don't have to use the min- values, and it would just center.

这篇关于CSS背景视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！