Css Background Video
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...
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="" type="video/webm">
<source src="" 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!
Here is my jsfiddle:
5 Answers
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;
}
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.
Working example with object-fit: cover; More about it here
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.videobg {
height: 100vh;
overflow: hidden;
position: relative; /* requires for to position video properly */
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
object-fit: cover; /* combined with 'absolute', works like background-size, but for DOM elements */
}<div class="videobg">
<video autoplay loop muted>
<source src="" type="video/webm">
<source src="" type="video/mp4">
</video>
</div>In modern browsers, you can manipulate object-fit and do this without the container.
video.bg {
position: absolute;
top: 0;
left: 0;
z-index: -100;
width: 100%;
height: 100%;
object-fit: cover;
}
.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>
place the video inside a <center> tag
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
