How to center HTML5 Videos

Question

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    lt  DOCTYPE HTML gt   lt html gt     lt head gt       lt title gt Test lt  title gt       lt script type  text css  gt       center         margin  0 auto             lt  script gt     lt  head gt     lt body gt       lt div class  center  gt         lt video controls  controls  gt           lt source src   media MVI 2563 ogg  type  video ogg    gt          Your browser does not support the video tag         lt  video gt       lt  div gt     lt  body gt   lt  html gt    I know this must be something I m overlooking in the wee hours of the morning  but any help would be appreciated    Thanks

User · Answer

Do this    lt video style  display block  margin  0 auto   controls gt      lt  video gt    Works perfect   D

User · Answer

If you have a width in percent  you can do this     x000D   x000D  video   x000D    width  50   important  x000D    height  auto  important  x000D    margin  0 auto  x000D    display  block  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt body gt  x000D   x000D     lt video controls gt  x000D       lt source src  http   www nasa gov downloadable videos sciencecasts- total eclipse of the moon mp4  type  video mp4  gt  x000D        Your browser does not support HTML5 video  x000D     lt  video gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I was having the same problem  until I realized that  lt video gt  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

User · Answer

Use margins  lt video gt  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   x000D   x000D  video   x000D        width  50   important  x000D        height  auto  important  x000D        margin  0 auto  x000D        display  block  x000D        x000D   x000D      h1   x000D        text-align  center  x000D        color   C42021  x000D        font-size  20px  x000D        x000D   lt  DOCTYPE html gt  x000D           lt html gt  x000D              lt head gt  x000D                 lt meta charset  UTF-8  gt  x000D                 lt title gt Test lt  title gt  x000D                  lt link rel  stylesheet  type  text css  href  mystyle css  gt  x000D              lt  head gt  x000D              lt body gt  x000D                 lt h1 gt  x000D                   How do you center a video  x000D                 lt  h1 gt  x000D                 lt div class  center  gt  x000D                    lt video controls  controls  gt  x000D                       lt source src  https   repositorio ufsc br xmlui bitstream handle 123456789 100149 V  deo 20convertido mp4  type  video mp4    gt  x000D                    lt  video gt  x000D                 lt  div gt  x000D              lt  body gt  x000D           lt  html gt  x000D   x000D   x000D    See the code ready here for more understanding   You can view the code online Fiddle

User · Answer

HTML CODE    lt div gt    lt video class  center  src  vd vd1 mp4  controls poster  dossierimage imagex jpg  width  600  gt   lt  video gt   lt  div gt    CSS CODE      center       margin-left  auto      margin-right  auto      display  block

User · Answer

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

User · Answer

center   width 500px  margin-right auto  margin-left auto

User · Answer

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    lt table align center gt  lt tr gt  lt td gt       lt video width 420 height 236 controls  controls  autoplay  autoplay  gt           lt source src  video video ogv  type  video ogg  codecs  theora  vorbis    gt           lt source src  video video webm  type  video webm   gt           lt source src  video video mp4  type  video mp4  gt           lt p class  sidebar  gt If video is not visible  your browser does not support HTML5 video lt  p gt       lt  video gt   lt  td gt  lt  tr gt  lt  table gt

User · Answer

snowBlind In the first example you gave  your style rules should go in a  lt style gt  tag  not a  lt script gt  tag    lt style type  text css  gt     center       margin  0 auto       lt  style gt    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

User · Answer

x000D   x000D   lt html gt     lt body gt       lt h1 align  center  gt         lt video width  1000  controls gt           lt source src  video mp4  type  video mp4  gt         lt  video gt       lt  h1 gt     lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

I will not prefer to center just using video tag as  user142019 says  I will prefer doing it like this    x000D   x000D   videoDiv x000D    x000D      width  70     or whatever   you prefer   x000D      margin  0 auto  x000D      display  block  x000D    x000D   lt div class  videoDiv  gt  x000D     lt video width  100   controls gt  x000D       lt source src  https   www w3schools com html mov bbb mp4  type  video mp4  gt  x000D       lt source src  https   www w3schools com html mov bbb ogg  type  video ogg  gt  x000D    Your browser does not support the video tag  x000D     lt  video gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

Try this   video   display block  margin 0 auto

User · Answer

I was having the same problem  This worked for me    center       margin  0 auto       width  400px        display block

User · Answer

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    lt div class central gt       lt video id  vid1  width  400  controls gt           lt source src  Carnival01 mp4  type  video mp4  gt       lt  video gt         lt video id  vid2  width  400  controls gt           lt source src  Carnival02 mp4  type  video mp4  gt       lt  video gt   lt  div gt    lt style gt  div central      margin  0 auto    width  880px   lt  --this value must be larger than both videos   padding etc-- gt     lt  style gt    Worked for me

User · Answer

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    lt video class  center      gt     lt  video gt

[css] How to center HTML5 Videos?

Examples related to css

Examples related to html

Examples related to video