How to Center a Video in HTML ?

Last Updated : 21 Mar, 2024

Centering a video in HTML enhances the user interface, offering a cleaner and more organized appearance. We can achieve this effect with two different methods, by using the Flexbox and the “style” attribute.

Below are the approaches to Center a Video in HTML:

Table of Content

Using the Flexbox
Using the style Attribute

Using the Flexbox

In this approach, we are using Flexbox to center a video horizontally and vertically within its container. This also ensures responsiveness with percentage-based widths and a maximum width limit for the video element.

Syntax:

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

Example: The below example uses Flexbox to Center a Video in HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Flexbox</title>
    <style>
        .video-container {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        video {
            width: 190%;
            max-width: 300px;
        }
    </style>
</head>

<body>
    <div style="text-align: center;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <p>Using Flexbox</p>
    </div>
    <div class="video-container">
        <video controls style="width:200%; 
                               max-width: 400px;">
            <source type="video/mp4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240311160922/Demo.mp4">
        </video>
    </div>
</body>

</html>

Output:

Using the style Attribute

In this approach, the style attribute is used to center both the heading and the video within their respective <div> elements by setting the text-align property to center.

Syntax:

<div style="text-align: center;">

Example: The below example uses the style Attribute to Center a Video in HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>style Attribute</title>
</head>

<body>
    <div style="text-align: center;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <p>Using the style Attribute</p>
    </div>
    <div style="text-align: center;">
        <video controls style="width:100%; 
                               max-width: 400px;">
            <source type="video/mp4" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240311160922/Demo.mp4" >
            Your browser does not support the video tag.
        </video>
    </div>
</body>

</html>