Text overlay for Video?

I want to overlay a video with text, but can’t work out how. Searching here and YouTube don’t show anything either…

It seems that this has been raised before, but there was no answer…

An SVG doesn’t seem to do it either:

Have you tried using absolute positioning for the text? I can’t see why it should not work. Make a container/div and place two other absolute positioned DIVs inside (one with the video, one with the text) and it should work. Am I missing something?

Yup, that did it! Thank you!

Embarrassed not to have got the “concept” of a Div sooner.

At the risk of asking you to teach me everything, if i make the divs absolute does every subsequent section have to be absolute?

They are in my hands, but seems pretty clumsy!

I think watching this video from Kevin Geary about relative and absolute positioning would help:

Regarding your divs, you make their container relative (could be absolute too for that matter but then the container must be also “absolute” to another parent or if it is without a parent and set absolute it will be in relation to the main body or page). The divs inside the container are absolute related to it (the container). The content of the absolute divs will be contained inside them and move along with them.

So very simplistically,

Main container (relative) >
DIV Wrapper 1,2,3 (absolute and give coordinates/top/bottom, etc) > Content positioned however you like inside the “absolute” div (can use flex, grid, block whatever suits the occasion).

Great, thanks for the link and your comments.

So many videos out there it is hard to know which ones are decent quality and accurate!

1 Like