How to center a video inside HTML documents

There are three easy methods you can use to center a video rendered inside your HTML document.

They are as follows:

• Using the <center> HTML tag
• Adding a <div> container to the video element with text-align:center style
• Applying margin: auto 0px and display:block styles to the video element itself

This tutorial will show you how to use all the methods listed above.

Center a video using the center tag

The HTML <center> tag is a container tag that applies the display:block and text-align:center style to center its child tags.

You can place your HTML <video> tag inside the <center> tag to place the video element at the center of the page:

<center>
  <video controls>
    <source src="video.webm" type="video/webm" />
  </video>
</center>

But the <center> tag is now deprecated because it controls the presentation of the content, meaning that it takes the job of CSS.

Although the <center> tag still works on all modern browsers, it may be dropped in the future or supported only for compatibility purposes (so old websites won’t break)

Center a video using div tag and text-align:center property

Because the <center> tag is no longer an HTML standard, you can create your own version of the tag by creating a <div> with text-align:center applied to it.

To reuse the <div> tag as many times as you need, you can write a style for the .center class as follows:

div.center {
  text-align: center;
}

Now you can wrap your <video> tag inside a <div class="center"> tag:

<div class="center">
  <video controls>
    <source src="video.webm" type="video/webm" />
  </video>
</div>

Your video element will be rendered at the center of the <div> element.

Centering the video element with margin and display style

If you don’t want to add any wrapper tag to your <video> tag like the two methods above, then you can apply some style to the <video> tag itself.

Here’s the style you need to write to center the <video> element:

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

The display:block style is required because the <video> element uses display:inline by default.

Without changing the <video> tag to a block element, the margin property won’t work. This is because an inline element only takes up as much width as necessary to render its content.

By changing the display property to block, the <video> tag will now take the full width of the page.

Setting the margin-left and margin-right properties to auto will distribute the empty space on the left and right side of the content evenly.

Using the CSS above, you only need to add the center class to the <video> tag anytime you want to center a video element:

<video class="center" controls>
  <source src="video.webm" type="video/webm" />
</video>

Centering YouTube/ Vimeo video embed in HTML

When you’re embedding a video from YouTube to your HTML page, you will be given an <iframe> tag to copy and pass into your HTML document.

An example YouTube video embed code is as follows:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/<video-id>"
  title="YouTube video player"
  frameborder="0"
  allowfullscreen
></iframe>

You can use any of the three methods for the <video> tag above to center a YouTube video embed in your HTML page.

My favorite is to use the <div> tag with the class center:

<div class="center">
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/<video-id>"
    title="YouTube video player"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

But if you don’t want to add a wrapper tag to your embed code, then you need to add a CSS rule for the <iframe> tag.

Here’s the minimum required CSS rule to center an <iframe> tag:

iframe.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

The <iframe> tag produces an inline element just like the <video> tag, so you need to adjust the display property to block first before applying the margins.

Next, you only need to add the center class to your <iframe> tag:

<iframe
  class="center"
  width="560"
  height="315"
  src="https://www.youtube.com/embed/<video-id>"
  title="YouTube video player"
  frameborder="0"
  allowfullscreen
></iframe>

The same methods also work for Vimeo videos because Vimeo embed code also uses an <iframe> tag.