![](/html-center-video/cover_image.png?ezimgfmt=rs%3Adevice%2Frscb15-1)
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 withtext-align:center
style - Applying
margin: auto 0px
anddisplay: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.