Center aligned video in computer window

Inserting a video in HTML is easy but centering it can be tricker sometimes. Here you’ll see how to center a video very easily in your HTML document.

You can include a video in HTML from many different sources. Such as self-hosted videos, and embedding from YouTube, Vimeo, etc.

Anyways, whatever the source you’re using, I will make sure that everyone can center their videos perfectly.

You can see the demo of the finished products (in the link below) before diving in.

Live Preview

Let’s get started.

Table of Contents show

Centering a video in your HTML document

In this section, I am using a self-hosted video. But in the following section, I will use YouTube & Vimeo. So if you have a specific video source in mind, see its corresponding section. Otherwise, let’s follow me here.

I have index.html & style.css files in the root folder. Also, I have an “assets” folder where I stored the video. See my project structure in the infographic below.

Project structure, files and folders, infographic
Project structure

However, you may have a different project structure than mine, and it’s totally fine.

Here is my HTML & CSS below that make the video center aligned.

HTML

<div class="video-container">
  <video controls>
    <source src="./assets/video.mp4" type="video/mp4">
    <source src="./assets/video.ogg" type="video/ogg">
    Your browser does not support videos.
  </video>
</div> <!-- .video-container -->

As you see in the above HTML, I have a container <div> that has a .video-container class.

In the <video> tag, I have a control attribute. It shows the video player’s play/pause, volume, etc.

I have two <source> tags but you can have only one of them. Some browsers prefer the mp4 format and others prefer the ogg format. There are many free online tools that you can use to convert your mp4 video to ogg. Just Google for it (mp4 to ogg converter).

Finally, I have a custom text “Your browser does not support videos.” If someone’s browser does not support videos, this custom text will appear.

Not to mention, a <video> tag also can contain width & height attributes as you see below.

<video width="560" height="315" controls>
  <source src="video.mp4"> type="video/mp4">
</video>

But it’s not mandatory to have those two attributes (width & height) inside the <video> tag.

CSS

.video-container {
  padding: 90px 15px;
  background-color: #cfcfcf;
  /* optional CSS above*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.video-container video {
  /* it makes the video mobile responsive */
  max-width: 100%;
}
@media (min-width: 768px) {
  .video-container video {
    /* for larger screens */
    max-width: 700px;
  }
}

In this CSS, I used Flexbox to center-align the video. Also, I added vendor prefixes so that the page looks the same on all web browsers.

The max-width: 100% ensures the responsiveness of the video. Also, by having this property, the video never exceeds the viewport.

On large screens, I have a max-width: 700px because I don’t want the video to be full-width on a desktop, laptop, etc. But can increase or decrease this width as you like. The height will be automatically/proportionally adjusted. There is no need to assign height: auto.

This is how you can center a video using CSS Flexbox.

There are a few more other ways to center the video such as using Grid, position & transform, etc. Just to give you another way to centering it, below I have mentioned the Grid way:

.video-container {
  padding: 90px 15px;
  background-color: #cfcfcf;
  /* optional CSS above */
  display: grid;
  grid-template-columns: 1fr;
}
.video-container video {
  margin: 0 auto;
  max-width: 100%;
}
@media (min-width: 768px) {
  .video-container video {
    max-width: 700px;
  }
}

However, you need only anyone of these two CSS.

How to center align a YouTube video?

The ultimate process is the same as the first method that I mentioned in the last section. However, you don’t need to write additional CSS for the <iframe> to center-align YouTube videos.

But I would like to show you the process once again from the start. Let’s follow me again.

First of all, get the embed code for the YouTube video that you want to insert into your HTML document. If you don’t know, see this section of another post to get the embed code of any YouTube video.

Alright, assuming that you got the iframe/embed code.

Now paste the embed code inside a container <div> as you see below.

HTML

<div class="yt-video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Oa2apuOj5R4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

Here I have an extra wrapper <div> that has a .yt-video-container class. Now write the CSS based on this class.

CSS

.yt-video-container {
  padding: 90px 15px;
  background-color: #fcc9c5;
  /* optional CSS above */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

This will make your YouTube video center align. With this code in place, your video will look like the screenshot below.

center aligned YouTube video
Center-aligned YouTube video

But there is a caveat. If you want to assign a custom width & height for the video as I did in the earlier section (self-hosted video), you have to write a few more lines of CSS based on the <iframe>

Let’s say that you want to make the video 700px wide. So your full code will be as follows:

.yt-video-container {
  padding: 90px 15px;
  background-color: #fcc9c5;
  /* optional CSS above */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.yt-video-container iframe {
  width: 700px;
  height: 394px;
}

But there is another caveat! YouTube videos come with a 16:9 proportion. And when you generate the iframe embed code, you’ll also have a width & height of 560 & 315 respectively (which is equivalent to the 16:9 ratio).

So when you increase or decrease the width of a YouTube video, make sure you also increase or decrease the height of it in the same 16:9 proportion. Otherwise, the video will not be properly resized. Also, height: auto will not work in this context because you have already declared the width & height in the iframe (which acts like an inline style).

In gist words, if you want to customize the width of a YouTube video, you also have to customize/assign the height (in 16:9 proportion).

Lastly, you don’t need any CSS media queries to make the YouTube video responsive.

How to center align Vimeo videos?

Center align a Vimeo video

You need to center align a Vimeo video differently than you did in the last two examples (self-hosted & YouTube).

Vimeo gives you two types of embed code such as fixed & responsive. In this example, I will use the responsive embed code and you should too.

If you don’t know, see this section of another post to get the embed code of a Vimeo video.

Copy and paste the embed code inside two extra wrapper <div> (as you see below).

HTML

<div class="vimeo-video-container">
  <div class="apply-vide-width-in-this-div">
    <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/652168193?h=6e8e61a55a&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Dr. Jill Kahn"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
  </div> <!-- .apply-vide-width-in-this-div -->
</div> <!-- .vimeo-video-container -->

As you see in the above HTML, I have two extra wrapper <div>. The first wrapper <div> has a .vimeo-video-container class. And the second wrapper <div> has a .apply-vide-width-in-this-div class.

Let’s write some CSS, to center align the video now.

CSS

.vimeo-video-container {
  padding: 90px 15px;
  background-color: #00ADEF;
}
.vimeo-video-container .apply-vide-width-in-this-div {
  max-width: 700px;
  margin: 0 auto;
}

You can replace the 700px with any number you like. And you don’t have to assign height value like you did for YouTube.

And this brings me to the end of this post.

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Learn more about centering elements

Conclusion

I showed you real-world examples and center-aligned videos from 3 different sources. e.g. Self-hosted, YouTube & Vimeo. Are you missing any other important or widely used sources? Let me know.

The method of centering videos is nearly similar. It is slightly different based on the source you’re using.

The examples and source code that I gave you in this post will help you to center-align videos from most sources. Therefore if you still have any issues, please do let me know.