How can I center a video in HTML?


I am trying to simply center video in HTML, how can I do it without using "margin:0 auto", is there any other way to center video using CSS or HTML? Below is my sample HTML

<div>
   <video controls>
    <source src="video.mp4" type="video/mp4" />
  </video>
</div>

Thanks


Asked by:- bhanu
1
: 172 At:- 10/14/2021 4:05:19 PM
HTML center video html






1 Answers
profileImage Answered by:- vikas_jk

There are many ways to center a video using HTML, here are few

  • Using Margin
    video.center {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    

    Fiddle: https://jsfiddle.net/4nupg1a8/

  • Using Transform in CSS
    video {
      margin-left: 50vw;
      transform: translate(-50%);
    }
  • Using HTML Center Tag
    <center>
     <video width="400" controls>
      <source src="mov_bbb.mp4" type="video/mp4">
      Your browser does not support HTML video.
     </video>
    </center>

    Fiddle: https://jsfiddle.net/4th0dpy6/

  • Using Flexbox
    .container video {
      display: flex;
      justify-content: center;
    }

You can also review this Responsive center image using pure CSS or Bootstrap 3/4 which can be helpful.

Hope it helps.

1
At:- 10/14/2021 4:18:50 PM
Thanks, it was easy, I think it is better to use < center > HTML tag. 0
By : bhanu - at :- 10/25/2021 7:41:00 AM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use