Html css背景视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26905511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css background video
提问by Stefan
Does someone know how to center this video background?
有人知道如何将这个视频背景居中吗？
I tried:
我试过：
margin: 0 auto;
text-align: center;
So far but none of these worked.
到目前为止，但这些都没有奏效。
This is my 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:
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!
如果调整窗口大小，我如何将此视频背景居中，以便在左侧/右侧删除相同的数量？感谢您的帮助！
Here is my jsfiddle: http://jsfiddle.net/pwxcvxe8/2/
这是我的 jsfiddle：http: //jsfiddle.net/pwxcvxe8/2/
回答by somethinghere
Since you are using an HTML5element the best way to center content is to put it in a relative container and then let CSS handle the rest like this:
由于您使用的是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;
}
You can replace <video>by any element you want to center, of course. Because you are using the videoelement I'm ignoring older browsers as I guess they won't like your page anyway. You also don't have touse the min-values, and it would just center.
当然，您可以替换<video>为您想要居中的任何元素。因为您正在使用该video元素，所以我忽略了旧浏览器，因为我猜他们无论如何都不会喜欢您的页面。您还没有要使用min-的值，它只是中心。
回答by Brad
In modern browsers, you can manipulate object-fitand do this without the container.
在现代浏览器中，您可以object-fit在没有容器的情况下进行操作和执行此操作。
video.bg {
position: absolute;
top: 0;
left: 0;
z-index: -100;
width: 100%;
height: 100%;
object-fit: cover;
}
回答by ati.mobini
.name-class {
background: url(../images/tv-temp.png) no-repeat;
background-position: center;
height: 686px;
position: fixed;
top: 100px;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.name-class video {
height: 473px;
position: absolute;
top: 148px;
left: 3px;
width: 100%;
}
<div class="name-class">
<video controls playsinline="" loop="" autoplay="">
<source src="..\video-name.mp4" type="video/mp4" autostart="true">
</video>
</div>
