How Do You Put Text in the Background of a Video in HTML?

To add text over video HTML, I use CSS position and z-index:

I set the video container to position: relative. Then I can position any elements like the text absolutely within that container.

I also set a higher z-index on the text. This allows it to display on top of the video.

To center the text, I use top/left values of 50% and translate(-50%, -50%). This centers it vertically and horizontally.

css
.container {
position: relative;
}

.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

z-index: 1;
}

The HTML structure:

html

My Text

By using position and z-index we can easily overlay text on video.

How do you put a background video on text in HTML?

By using position and z-index we can easily overlay text on video.

How do I add text to a video in HTML?