Instead of using absolute position for the video tag, I prefer to wrap it within a container element (as you see below). I will go through a couple of examples in this post and you can check all the live previews here.

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 -->

CSS

.video-container {
  display: flex;
  justify-content: center;
}
.video-container video {
  max-width: 100%; /* it makes the video mobile responsive */
}
@media (min-width: 768px) {
  .video-container video {
    max-width: 700px; /* for larger screens */
  }
}

Another way (CSS Grid) to align the video to the center

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 {
  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;
  }
}

How to center align a YouTube video?

The ultimate process is the same. You don’t need to write additional CSS for YouTube <iframe>. But I would like to show you the process once again from the start. Let’s follow me again.

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>

CSS

.yt-video-container {
  display: flex;
  justify-content: center;
}

But there is a caveat. If you want to assign a custom width & height, 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 {
  display: flex;
  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).

How to center align Vimeo videos?

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).

<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. The second wrapper <div> has a .apply-vide-width-in-this-div class. Let’s write some CSS, to center align it.

.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.

Read also:

  1. How to embed full-width YouTube videos in WordPress?
  2. How to insert a video in HTML and make it mobile responsive?

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

In the <video> tag, the control attribute shows the player’s play/pause, volume, etc. I used 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. It’s better to have both formats.

The custom text “Your browser does not support videos” will appear if someone’s browser does not support videos. 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.

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.