'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:

<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/

htmlcssvideobackground


Solution 1:[1]

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>

Solution 2:[2]

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

Solution 3:[3]

   .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>

Solution 4:[4]

place the video inside a <center> tag

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Brad
Solution 3 ati.mobini
Solution 4 Ishayu Roy

Related Questions