How to Center Video Using CSS

1. Use the margin-left and transform CSS Properties to Center the Video Element
2. Use the display and margin CSS Properties to Center the Video Element
3. Use the width, justify-content, and display CSS Properties to Center the Video Element

In this article, the user will learn to center the <video> element using CSS only. We have explained the multiple methods below to center the video using CSS.

However, users can put the <video> element inside the <center> tag and can center the video element easily. But in our case, we will not use the <center> tag as we only need to use CSS properties.

Use the margin-left and transform CSS Properties to Center the Video Element

We can use CSS’s margin-left and transform properties to center the video element without using the HTML <center> tag.

The margin-left property allows us to leave space on the element’s left side. Using the 50vw value of the margin-left property leaves half of the screen width to the element’s left.

Here, vw in the value represents the window size of the screen.

The transform property is used to change the position of an element using CSS. If we use translate(-50%) as a value of the transform property, it will move the video to the negative x direction, which means 50% of the video element width to the left.

For example, we have created the <video> and <source> tags inside it to embed the video in the HTML. After that, we applied some CSS properties to the <video> tag.

By applying the transform: translate(-50%) property, we ensure that the video’s center line overrides the screen’s center line.

HTML Code:

<video width="300" height="200" controls>
    <source
        src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
        type="video/mp4"
    />
</video>

CSS Code:

video {
    margin-left: 50vw;
    transform: translate(-50%);
}

Use the display and margin CSS Properties to Center the Video Element

We will use the display and margin CSS properties to center the video elements in this part.

Users can set the value of the display property to render the element on the webpage according to their requirements. In our case, we will set display: block to show elements in the block.

As discussed in the above example, the margin property allows us to set the space around the elements. We will set the margin: 0 auto value to the margin property.

Here, 0 represents that we need to set 0 space on the top and bottom of the element. The value auto represents that we need to set equal space on the left and right of the element.

In such a way, by setting equal space to the left and right of the element, we can center the video using CSS only.

We have created the HTML <video> element in the example below and applied the above CSS properties.

HTML Code:

<video width="300" height="200" controls>
    <source
        src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
        type="video/mp4"
    />
</video>

CSS Code:

video {
    display: block;
    margin: 0 auto;
}

Use the width, justify-content, and display CSS Properties to Center the Video Element

In this example, we will create the HTML <div> element and assign the container class name. We will add two <video> elements inside the <div> element.

Here, we will access the <div> element using its class name to apply the CSS properties to the whole <div> element.

In CSS, we will use the width:100% property, which specifies that the width of the <div> element with the container class should have the same width as the screen width. After that, we will use the justify-content: center CSS property, which allows us to center the content of the <div> element.

The display: flex and flex-direction: Row properties show both <video> elements in a single row. Here, the justify-content property plays the main role in centering the elements of the <div>.

We can center the <div> element’s content using these three properties.

HTML Code:

<div class="container">
    <video width="300" height="200" controls>
        <source
          src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
          type="video/mp4"
        />
    </video>
    <video width="320" height="240" controls>
        <source
          src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
          type="video/mp4"
        />
    </video>
</div>

CSS Code:

.container {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

In the above output image, users can see both videos are in a single row and centered on the screen.

This article has taught us the three methods to center the <video> element using CSS. All three methods can be used with other HTML elements to center it, as they are not element specific.