8

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:

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/

5 Answers 5

24

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.

2
  • You have to set your body, html height as 100%, or give the container a fixed height (say 400px); Otherwise the #container will have a height of 0, making the top: 50% half of 0... which is 0. Then it moves it -50% in the translate. I amended my post. Commented Nov 13, 2014 at 9:57
  • @tomer Just want to mention that, since I read this just now, the only change i'd make it the positioning using calc: top: 0; left: 0; top: calc(50%); left: calc(50%);. Older browsers that don't support calc (IE8 and lower) also don't support transform and will therefore just display the element without moving it (it crops differently but it's a nice fallback). This makes no difference for video elements as IE8 does not support them anyway, but if you're centring an image it's an easy way to ensure compatibility. Commented May 26, 2015 at 17:50
3

Working example with object-fit: cover; More about it here https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

* {
  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="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>
</div>

0

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;
}
0
   .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>
1
  • While this code may answer the question, providing information on how and why it solves the problem improves its long-term value
    – L_J
    Commented Jul 4, 2018 at 6:29
0

place the video inside a <center> tag

1
  • The <center> tag is deprecated and should not be used. Commented Feb 9, 2022 at 16:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.