Html5 video background, keep center of video in center

Question

I am trying to keep a background video centered regardless of how big the user drags the video. It's currently cutting off the right side of the videos when i scroll smaller. Here's what I have:

<section id="home">
     <div class="video_shader"></div>
        <div class="video_contain">
            <video autoplay="" loop="" poster="img/still.jpg" id="bgvid">
              <source src="/realWebm.webm" type="video/webm" />
              <source src="/realdeal.mp4" type="video/mp4">
              <source src="/reaOg.ogv" type="video/ogg" />
            </video>
        </div>
</section>

.video_contain{
display: block;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}

video {
min-width: 100%;
 min-height: 100%;
z-index: -100;
background-position: center;
background-size: cover;
}

#home {
width: 100vw;
height: 100vh;
display:block;
position: relative;
}

I would like the center of the video to be the center of the page always, even if the sides get cut off - that's actually ideal if it happens that way. Would appreciate any help. Thanks for reading!

Answer 1

here's how I typically do background video, and how I did it for the stre.am landing page:

.video_contain {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}

video {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
}

Answer 2

This is much shorter and worked for me.

video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    transform: translateX(calc((100% - 100vw) / 2));
}

Answer 3

In my use case where I always wanted the video to cover the entire viewport (no matter if the viewport aspect ratio was bigger or lower than the videos), the above solution didn't work exactly how i intended. Instead, the following worked much better:

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.video-container > video {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media screen and (max-aspect-ratio: 1920/1080) {
  .video-container > video {
    height: 100%;
  }
}
@media screen and (min-aspect-ratio: 1920/1080) {
  .video-container > video {
    width: 100%;
  }
}

My video was 1920x1080, and this works in IE11 (didnt test lower) and beyond.

Answer 4

  .bg-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  .bg-video-wrap > video,
  .bg-video-wrap > iframe {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
  }