How to center a video in HTML

You can center a video in HTML using the text-align property and setting it to "center" on the containing element, such as a div. You can also use the margin property and set it to "auto" on both the left and right sides of the video element to center it horizontally. 

how to center a video in html

Example: 

<div style="text-align:center;">

  <video width="320" height="240" controls>

    <source src="your-video-source.mp4" type="video/mp4">

  </video>

</div>

OR

<video style="display:block; margin:0 auto;" width="320" height="240" controls>

    <source src="your-video-source.mp4" type="video/mp4">

</video>

To make the video responsive, you can use the CSS width and height properties set to a percentage value, rather than a fixed pixel value. This allows the video to scale proportionally with the size of the viewport. You can also use the CSS max-width and max-height properties to limit the maximum size of the video when the viewport is enlarged.

Example:

<div style="text-align:center;">

  <video style="max-width:100%; height:auto;" controls>

    <source src="your-video-source.mp4" type="video/mp4">

  </video>

</div>

Another approach is to use CSS Grid or Flexbox to center the video and make it responsive, this way you can control the layout and display property of the video and its container. 

Example:

<div style="display:grid; place-items:center;">

  <video style="max-width:100%; height:auto;" controls>

    <source src="your-video-source.mp4" type="video/mp4">

  </video>

</div>

OR

<div style="display:flex; justify-content:center; align-items:center;">

  <video style="max-width:100%; height:auto;" controls>

    <source src="your-video-source.mp4" type="video/mp4">

  </video>

</div>

It's also a good practice to use a media query to adjust styles depending on the screen size or resolution.