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

Answer 1

Use margins 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;
    }

        
           
              
              
               
           
           
              

                 How do you center a video 
              
              

                 
              
           
        

See the code ready here for more understanding.

You can view the code online Fiddle