Video and text side by side html css

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:

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.

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.

Output: