Css背景视频

Question

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

我试过了:

margin: 0 auto;
text-align: center;

到目前为止,但这些都没有奏效.

这是我的代码.

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

如何调整窗口大小,如何将此视频背景居中,以便在左/右侧移除相同的数量？谢谢你的帮助!

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

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-的值,它只是中心.