How do I center an HTML5 video horizontally and vertically in a bare bones HTML document?

Question

Let's say I have a very simple HTML page with a single HTML5 video element. It's source code is:

<html>
    <head>
        <title>{TITLE}</title>
    </head>
    <body>
        <video height="{HEIGHT}" width="{WIDTH}" controls="">
            <source src="{SOURCE}" type="{TYPE}"/>
        </video>
    </body>
</html>

What can I do to center that video element both horizontally and vertically in the web browser? I'd prefer a CSS solution or at least a solution that uses as little in the way of hackish techniques as possible, but I'll take what I can get.

score 17 · Answer 1 · answered Jan 06 '16 at 05:39

17

Use following css will make your video element center vertically and horizontally.

video {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

Working Fiddle

answered Jan 06 '16 at 05:39

ketan

19,129
42
60
98

you have just won the "I am the daddy of the day" award - many thanks – danday74 Sep 30 '21 at 12:55

Kunj · Answer 2 · 2019-05-15T05:11:44.193

Couple of ways to achieve it (Added jQuery to help others as well):

Method 1: Add this class in your video

CSS:

.center {
    position: absolute;
    //Option 1
    top:50%; left: 50%;
    margin-left: -150px;
    margin-top: -75px;
    //Option 2 (Needs to check browser compatibility)
    top: calc(50%-75px);
    left: calc(50%-150px);
}

Method 2: Add some code for dynamic margins

CSS:

.center {
    position: absolute;
    top:  50%;
    left: 50%;
}

Code:

$('video').css({
    'margin-top': - $('video').height()/2,
    'margin-left': - $('video').width()/2
});

Method 3: Window size

Code:

$(window).on('load resize', function(){
    $('video').css({
        'position' : 'absolute',
        'top': $(window).height()/2 - $('video').height()/2,
        'left': $(window).width()/2 - $('video').width()/2
    });
});

Here is a link How to center an element horizontally and vertically for more detailed description.

score 1 · Answer 3 · answered Jan 06 '16 at 05:49

For background video i use this

HTML:

<video class="background" controls="">
    <source src="{SOURCE}" type="{TYPE}"/>
</video>

CSS:

   .background {
    position: fixed;
    right: 0px;
    bottom: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
   }

score 0 · Answer 4 · answered Jan 06 '16 at 05:21

0

Include a simple css center class, like this for example:

    .center { margin: 0 auto; width: 400px; }

And then try this:

    <video class="center" height="{HEIGHT}" width="{WIDTH}" controls="">
       <source src="{SOURCE}" type="{TYPE}"/>
    </video>

answered Jan 06 '16 at 05:21

Legeran

117
7

this doesn't work: https://jsfiddle.net/w05cnr4b/ – But those new buttons though.. Jan 06 '16 at 05:31

score 0 · Answer 5 · answered Jan 06 '16 at 05:25

Nothing very complex about this but here you go...

100% height on body and html gives you full screen vertical size. Position the video using relative positioning 50% down and subtract half the height for a negative margin to account for element size. This is pretty much the standard way but there are a bazillion others.

html,
body {
  height: 100%;
}
body {
  text-align: center;
  margin: 0;
}
video {
  top: 50%;
  position: relative;
  margin-top: -75px;
  height: 150px;
}

<html>

<head>
  <title>{TITLE}</title>
</head>

<body>
  <video height="{HEIGHT}" width="{WIDTH}" controls="">
    <source src="{SOURCE}" type="{TYPE}" />
  </video>
</body>

</html>

score -1 · Answer 6 · answered Jan 06 '16 at 05:25

-1

I'm new to web development. But I think what you want to do is to add an id to your video tag

Then in your CSS file, do this

#vid {
    position: absolute;
    top: 30%;
    left: 30%;
}

Experiment with the percentages to find what looks perfectly centered. Again, I'm new to this and I'm sure there's a better way to do it. But hey you said you'd take what you can get!

answered Jan 06 '16 at 05:25

Ethan Fischer

1,229
2
18
30

this doesn't work either: https://jsfiddle.net/zr8k1bu5/ video is not centered – But those new buttons though.. Jan 06 '16 at 05:34
Oh sorry, billynoah. I guess this was one of the bazillion ways that didn't work – Ethan Fischer Jan 06 '16 at 05:39

How do I center an HTML5 video horizontally and vertically in a bare bones HTML document?

6 Answers6