askvity

How to Align a Video in HTML?

Published in HTML Video Alignment 3 mins read

You can align a video in HTML using various CSS techniques, the most common being using text-align: center on a parent container or leveraging Flexbox or Grid layouts. Here's a breakdown of different methods:

1. Using text-align: center

This method works best for horizontally centering the video. Wrap the video element within a <div> and apply the text-align: center style to the <div>.

<div style="text-align: center;">
  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

Explanation:

  • The text-align CSS property is primarily for aligning inline content within a block-level element.
  • The <video> element, by default, behaves as an inline element.
  • Setting text-align: center on the parent <div> horizontally centers the video within that <div>.

2. Using Flexbox

Flexbox offers more control over both horizontal and vertical alignment.

<div style="display: flex; justify-content: center; align-items: center; height: 300px;">
  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

Explanation:

  • display: flex turns the <div> into a flex container.
  • justify-content: center horizontally centers the video within the flex container.
  • align-items: center vertically centers the video within the flex container.
  • height: 300px ensures there's enough space for vertical centering to be visible; adjust this value as needed.

3. Using Grid Layout

Similar to Flexbox, Grid layout provides powerful alignment capabilities.

<div style="display: grid; place-items: center; height: 300px;">
  <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

Explanation:

  • display: grid turns the <div> into a grid container.
  • place-items: center is a shorthand that sets both align-items and justify-items to center, centering the video both horizontally and vertically.
  • height: 300px is again used to illustrate vertical centering.

4. Using Margin Auto

For simple horizontal centering, you can also apply margin: 0 auto to the video element itself, but it requires the video to have a defined width and to be displayed as a block-level element.

<video width="320" height="240" controls style="display: block; margin: 0 auto;">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Explanation:

  • display: block changes the video element from an inline element to a block-level element.
  • margin: 0 auto sets the top and bottom margins to 0 and the left and right margins to auto, which equally distributes the horizontal space, effectively centering the video.

In summary, the best method for aligning a video in HTML depends on the specific alignment requirements and the overall layout of your page. text-align: center is simplest for horizontal centering, while Flexbox and Grid offer more comprehensive control.

Related Articles