How to center HTML5 Videos?

CssHtmlVideo

Css Problem Overview

I'm just messing around with some HTML5, and I was trying to center a video on the page. For some reason I can't get it to center. I've tried to add a class to the video tag itself, and I've wrapped the video in a separate div. However, the video stays on the left.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Test</title>
    <script type="text/css">
    .center {
      margin: 0 auto;
    }
    </script>
  </head>
  <body>
    <div class="center">
      <video controls="controls">
        <source src="/media/MVI_2563.ogg" type="video/ogg" />
        Your browser does not support the video tag.
      </video>
    </div>
  </body>
</html>

I know this must be something I'm overlooking in the wee hours of the morning, but any help would be appreciated.

Thanks

Css Solutions

Solution 1 - Css

HTML CODE:

<div>
 <video class="center" src="vd/vd1.mp4" controls poster="dossierimage/imagex.jpg" width="600"></video>
</div>

CSS CODE:

.center {
    margin-left: auto;
    margin-right: auto;
    display: block
}

Solution 2 - Css

The center class must have a width in order to make auto margin work:

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

Then I would apply the center class to the video itself, not a container:

<video class='center' …>…</video>

Solution 3 - Css

I was having the same problem, until I realized that <video> elements are inline elements, not block elements. You need only set the container element to have text-align: center; in order to center the video horizontally on the page.

Solution 4 - Css

Do this:

<video style="display:block; margin: 0 auto;" controls>....</video>

Works perfect! :D

Solution 5 - Css

I will not prefer to center just using video tag as @user142019 says. I will prefer doing it like this:

.videoDiv
{
    width: 70%; /*or whatever % you prefer*/
    margin: 0 auto;
    display: block;
}


<div class="videoDiv">
  <video width="100%" controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support the video tag.
  </video>
</div>

This will make your video responsive at the same time the panel for controls will have the same size as the video rectangle (I tried what @user142019 says and the video was centered, but it looked ugly in Google Chrome).

Solution 6 - Css

I was having the same problem. This worked for me:

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

Solution 7 - Css

Try this:

video {
display:block;
margin:0 auto;
}

Solution 8 - Css

@snowBlind In the first example you gave, your style rules should go in a <style> tag, not a <script> tag:

<style type="text/css">
  .center {
    margin: 0 auto;
  }
</style>

Also, I tried the changes that were mentioned in this answer (see results at http://jsfiddle.net/8cXqQ/7/), but they still don't appear to work.

You can surround the video with a div and apply width and auto margins to the div to center the video (along with specifying width attribute for video, see results at http://jsfiddle.net/8cXqQ/9/).

But that doesn't seem like the simplest solution...shouldn't we be able to center a video without having to wrap it in a container div?

Solution 9 - Css

I had a similar problem in revamping a web site in Dreamweaver. The site structure is based on a complex set of tables, and this video was in one of the main layout cells. I created a nested table just for the video and then added an align=center attribute to the new table:

<table align=center><tr><td>
    <video width=420 height=236 controls="controls" autoplay="autoplay">
        <source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
        <source src="video/video.webm" type='video/webm' >
        <source src="video/video.mp4" type='video/mp4'>
        <p class="sidebar">If video is not visible, your browser does not support HTML5 video</p>
    </video>
</td></tr></table>

Solution 10 - Css

All you have to do is set you video tag to display:block; FTW the default is inline-block FTL.

Try this

.center {
  margin: 0 auto;
  width: (whatever you want);
  display: block;
}

Solution 11 - Css

If you have a width in percent, you can do this :

video {
  width: 50% !important;
  height: auto !important;
  margin: 0 auto;
  display: block;
}


<!DOCTYPE html>
<html>

<body>

  <video controls>
    <source src="http://www.nasa.gov/downloadable/videos/sciencecasts-_total_eclipse_of_the_moon.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
  </video>

</body>

</html>

Solution 12 - Css

Use margins <video> is an inline element so you'll have to add display block; to your css class.

You can use specific with, but I wouldn’t use px values. Use % to make it responsive, like:

width: 50%;

That’ll make the video half of the viewport width.

See the original documentation here O World Wide Web Consortium W3C

mystyle.css

video {
      width: 50% !important;
      height: auto !important;
      margin: 0 auto;
      display: block;
    }

    h1 {
      text-align: center;
      color: #C42021;
      font-size: 20px;
    }


<!DOCTYPE html>
        <html>
           <head>
              <meta charset="UTF-8">
              <title>Test</title>
               <link rel="stylesheet" type="text/css" href="mystyle.css">
           </head>
           <body>
              <h1>
                 How do you center a video 
              </h1>
              <div class="center">
                 <video controls="controls">
                    <source src="https://repositorio.ufsc.br/xmlui/bitstream/handle/123456789/100149/Vídeo%20convertido.mp4" type="video/mp4" />
                 </video>
              </div>
           </body>
        </html>

See the code ready here for more understanding.

You can view the code online Fiddle

Solution 13 - Css

<center>
    <video controls width="100%" height="480">
        <source src="video.mp4" type=video/mp4>
    </video>
</center>

Encapsulate your <video> within <center></center> tags, <figure></figure> also works.

Solution 14 - Css

.center { width:500px; margin-right:auto; margin-left:auto; }

Solution 15 - Css

I found this page while trying to center align a pair of videos. So, if I enclose both videos in a center div (which I've called central), the margin trick works, but the width is important (2 videos at 400 + padding etc)

<div class=central>
    <video id="vid1" width="400" controls>
        <source src="Carnival01.mp4" type="video/mp4">
    </video> 

    <video id="vid2" width="400" controls>
        <source src="Carnival02.mp4" type="video/mp4">
    </video>
</div>

<style>
div.central { 
  margin: 0 auto;
  width: 880px; <!--this value must be larger than both videos + padding etc-->
}
</style>

Worked for me!

Solution 16 - Css

<html>
  <body>
    <h1 align="center">
      <video width="1000" controls>
        <source src="video.mp4" type="video/mp4">
      </video>
    </h1>
  </body>
</html>

Solution 17 - Css

If you use bootstrap, you can use d-block and m-auto classes.

<video class="d-block m-auto" width="1100px" control> 
<source src="...." type="video/mp4" /> 
</video>

Categories
Recommended Css Solutions
Recommended Html Solutions
Recommended Video Solutions

Previous Solution:

How to create a Batch File for Visual Studio Command Prompt

Visual StudioCommand LineMsbuildContinuous IntegrationTerminal

Next Solution:

Python: find all classes which inherit from this one?

PythonInheritance

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsnowBlindView Question on Stackoverflow
Solution 1 - CssbadrView Answer on Stackoverflow
Solution 2 - Cssuser142019View Answer on Stackoverflow
Solution 3 - CssdjpMusicView Answer on Stackoverflow
Solution 4 - CssmehulmptView Answer on Stackoverflow
Solution 5 - CssJuan Ignacio Avendaño HuergoView Answer on Stackoverflow
Solution 6 - Cssuser1399749View Answer on Stackoverflow
Solution 7 - CssnikkorView Answer on Stackoverflow
Solution 8 - Cssuser456814View Answer on Stackoverflow
Solution 9 - CssMoose-Anne SquirrelView Answer on Stackoverflow
Solution 10 - Cssuser3529598View Answer on Stackoverflow
Solution 11 - CssSébastien GicquelView Answer on Stackoverflow
Solution 12 - CssRenato LazaroView Answer on Stackoverflow
Solution 13 - Css8c6b5df0d16ade6cView Answer on Stackoverflow
Solution 14 - Css0xAliView Answer on Stackoverflow
Solution 15 - CssdrmarkreuterView Answer on Stackoverflow
Solution 16 - Cssshivani reddyView Answer on Stackoverflow
Solution 17 - CssShakiView Answer on Stackoverflow