Responsive Background Video

I am looking to make my video background like this: http://www.teektak.com/ The issue I'm having is that my video is responsive, but it is fixed to the left. I can't figure out for

Solution 1:

Add these CSS rules to your body (the video's parent container):

text-align: center; /* ensures the image is always in the h-middle */overflow: hidden; /* hide the cropped portion */

Add these CSS rules to your video:

display: inline-block;
position: relative; /* allows repositioning */left: 100%; /* move the whole width of the image to the right */margin-left: -200%; /* magic! */

Most of this was pulled directly from Bryce Hanscomb's answer to another similar question: How to center crop an image (<img>) in fluid width container

Here's a jsfiddle just in case: http://jsfiddle.net/pLj0gcpu/

(Note that the markup and styles in this fiddle were pulled from your given URL)

Solution 2:

To get the video to take the full size of the screen:

video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}

Solution 3:

If you wanna center something horizontally responsively, then do

left: 50%;
transform: translateX(-50%);

Note, you will need to set a "position" as well