Responsive Background Video

Question

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 the life of me how to make it so that it centers horizontally to the window when adjusted.

Here is a link to the test site to see what I am talking about: https://robotplaytime.paperplane.io/

HTML

<body>
    <video poster="images/robotPlaytimeVideo.png" id="bgvid" autoplay loop muted>
        <source src="images/robotPlaytimeVideo.mp4" type="video/mp4">
    </video>
</body>

CSS

html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
video { 
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
    background: url(../images/robotPlaytimeVideo.png) no-repeat;
    background-size: cover;
}

possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — apaul, Feb 09 '15 at 15:54
Wrapping it in a div and using that css still anchors the video to the top left corner. Any other suggestions? Thanks — Jason Chung, Feb 09 '15 at 16:38
You probably don't need the div, just center the video as if it were a div — apaul, Feb 09 '15 at 16:41
Tried that, didn't change the responsiveness. It's still anchored to the top left corner. — Jason Chung, Feb 09 '15 at 16:49
Tried what? There are 16 different methods/answers on the linked page. — apaul, Feb 09 '15 at 16:50
Well I tried the first solution (and checked out the others) and it fixed vertical centering, so thanks! But the video is still anchored to the left, so now I need to figure out why it won't center horizontally: https://robotplaytime.paperplane.io/ — Jason Chung, Feb 09 '15 at 16:58
The video is trying to maintain aspect ratio, unless you want to distort the video or crop the video, it will have white space when centered... http://jsfiddle.net/apaul34208/h99y1cvh/1/ — apaul, Feb 09 '15 at 17:21
I don't have a problem with it maintaining the aspect ratio, so how it is set right now is ok. I am just trying to figure out how to make it horizontally center when the width is adjusted. See this example: http://www.teektak.com/. Right now not having any white space is how it should be. It is fine if the video overflows. It just needs to be centered to the window. — Jason Chung, Feb 09 '15 at 17:26

score 0 · Answer 1 · answered Feb 09 '15 at 14:27

0

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

answered Feb 09 '15 at 14:27

Justin Breiland

450
2
5

Doing this gives me white space. My current code gives me the full screen affect, but it is anchored to the top left. The affect should be similar to this: http://www.teektak.com/. For example when you resize the previous links width it recenters the video. When you resize the height it vertically aligns the video in the middle. – Jason Chung Feb 09 '15 at 14:39
Is your parent container set to position: relative; ? – Justin Breiland Feb 09 '15 at 14:45
Nope, but I just tried it and it left me with white space. Here is the site: https://robotplaytime.paperplane.io/ – Jason Chung Feb 09 '15 at 14:56

score 0 · Accepted Answer · edited May 23 '17 at 11:51

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)

Thanks, I figured it out. Your answer is close enough to what I had. Thanks again — Jason Chung, Feb 09 '15 at 18:56

score 0 · Answer 3 · edited Jan 14 '19 at 18:28

0

If you wanna center something horizontally responsively, then do

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

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

edited Jan 14 '19 at 18:28

Inder

3,711
9
27
42

answered Jan 14 '19 at 17:34

Saucy

26
2

Responsive Background Video

3 Answers3

Linked