How to Center a Video in HTML

1. Use margin, width and display CSS Properties to Center Video in HTML
2. Use the center Tag to Center Video in HTML
3. Use the text-align CSS Property to Center Video in HTML

This tutorial will discuss a few methods to center a video in HTML.

Use margin, width and display CSS Properties to Center Video in HTML

We can use the combination of margin, width and display CSS properties to center a video in HTML. We use the margin property to set the margin of an element in all four directions.

We will use the property to apply margin to the video tag in this method. We can use the width property to give an element a certain width.

We can set width in various units like px, em and even percentage. We will see the difference between the use of these units in the example below.

The display property is essential to set the behavioral display of the selected element. It takes the values like block, inline-block and inline.

Finally, we use the video tag to insert a video in HTML.

For example, write a video tag in HTML with a class center. First, specify the correct URL of the video file in the src attribute.

Next, write the controls attribute and close the video tag. Select the center tag in CSS and apply the margin property.

Set the property’s value to 0 auto and give the video width of 300px. Finally, set the display property to block.

Now, we will describe what we did in the steps above. The controls attribute in the video tag will display the controls to pause, play, slide, increase and decrease the volume and toggle fullscreen.

If we remove the controls attribute from the tag, the control bar will disappear in the video.

CSS’ margin property will set the top and bottom margins to 0. The left and right margins are set to auto.

It means that the video will take the specified width of 300px, and the rest of the space is divided equally and is set as the left and right margins.

The video element is set as a block-level element so that the video will take the space of the entire block. It enables the properties ahead to come into effect.

Therefore, we can center a video in HTML using the CSS properties like margin, width and display properties.

Example Code:

<video class="center" src="pointing_pink.mp4" controls></video>

.center{
 margin: 0 auto;
 width: 300px;
 display: block;
}

However, this method has a shortcoming. In the example above, we have used the px unit in width.

When we resize the browser window or browse the website from the mobile view, the video will not be responsive.

We can use % or vw in the width property to solve this problem. When we use these units, the video element is responsive.

Let’s see the example below.

.center{
 margin: 0 auto;
 width: 40%;
 /* widht:40vw */
 display: block;
}

Use the center Tag to Center Video in HTML

We can also use the center HTML tag to center an element in HTML.

The tag was used until HTML4. The modern browsers do not support the tag.

However, some older browsers still support it. Therefore, it is advised not to use the center tag to center an element in HTML.

Anyway, we will look into the usage of the tag to center a video in this section.

For example, create a video tag and insert a video. Use the width property to give a certain width to the video.

Next, wrap the video tag with the center tag. Hence, the video will be centered.

<center>
 <video class="center" src="pointing_pink.mp4" controls width="300"> </video>
</center>

Use the text-align CSS Property to Center Video in HTML

As mentioned earlier, using the center tag is discouraged. An alternative to the center tag is to use the text-align CSS property.

We can set the text-align property to center the element to the center. We can implement this technique to center the video.

Then, we can wrap the video in a container and apply the styles.

For example, create a div with the class center. Inside the div, create a video tag to insert the video.

You can either set the video’s width in HTML or use the CSS’ width property. In CSS, select the center class and set the text-align property to center.

Thus, the video will be centered.

Example Code:

 <div class="center">
 <video src="pointing_pink.mp4" controls width="400"></video>
 </div>

.center{
 text-align: center;
}

This article taught us three different ways to center a video in HTML. We used the margin property, center tag and text-align property to center the video in HTML.