HTML5 Video Background, Keep Center of Video in Center

Html5 video background, keep center of video in center

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

stream fs vid for mobile

HTML5 Video centering source

You probaly mean the object-fit property in CSS. This will scale the video to fill the video container element, keeping its ratio intact.

You can change the height of the video in the snippet below. You will notice the video will scale itself to the exact height of its container.

With object-fit: cover;

body, html {  padding: 0;  margin: 0;  height: 100%;  width: 100%;}
video {  height: 100%;  width: 100%;  object-fit: cover;}

<video controls>   <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>   <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>   <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp></video>

How can I center an image over a video using HTML and CSS?

#wrapper {
  position: relative;
  display: inline-block;
}
#reel {
  width: 100vw;
}
.overlay {
  position: absolute;
  width: 40%;
  left: 30%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div id="wrapper">
  <video playsinline autoplay muted loop id="reel">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <img class="overlay" src="https://www.w3schools.com/images/driveicon_32.png">
</div>

center fullscreen background video

Here's a JQuery function I wrote a long while back to make a video a fullscreen background. Essentially if the aspect ratio of the window is taller than the aspect ratio of the video then make the height 100% and width auto and vice-versa for wider aspect ratio windows.

// Resize the video elements so that we don't get any borders due to aspect ratio
function resizeVideo() {
  if ($(window).height() > $(window).width() * 0.5425) { // Which dimension is bigger dependant on aspect ratio (16:9)
    $("video").removeAttr("height").removeAttr("width").width("auto").height("100%");
  }
  else {
    $("video").removeAttr("height").removeAttr("width").width("100%").height("auto");
  }
};

// Add the resize function to the window resize event but put it on a short timer as to not call it too often
var resizeTimer;
$(window).resize(function () {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(resizeVideo, 150);
});

Scaling HTML5 video and maintain center?

You can use jQuery to center the video by changing the top and left attributes.

$(window).resize(function () {
    var $vid = $('#fullscreen_video');
    $vid.css({
        left: ($(window).width() - $vid.width()) / 2,
        top: ($(window).height() - $vid.height()) / 2
    });
});

HTML5 Video Background, Keep Center of Video in Center