Best way to add text over video in a HTML5 web banner?

[hannahs83373977]

I need to add some copy over a HTML5 banner however I am not sure the best way to do so, I know you can’t add text over a video using layers. The options I have discovered are:

• Making the video into an image sequence and creating it this way (but it is a lot of frames)
• Adding the text in After Effects and then importing the video into Animate
• Adding the text in with HTML/JS but I’d need a very beginner level tutorial on how to do this

I also am not sure what is best practice for using video in general, as keeping the file format as small as possible is important.

If anyone has some advice or a better suggestion about how I could achieve this, that would be amazing!

Thank you

[Colin Holgate]

You're adding the video using an HTML5 Component. Do the same with the text, then it will be on top of the video.

[ClayUUID]

https://forums.adobe.com/people/Colin+Holgate  wrote

You're adding the video using an HTML5 Component.

He is? If his goal is to keep the file as small as possible he shouldn't be, because the video component adds about 8K of support code.

[Colin Holgate]

8k isn't that much of a banner's budget, especially if it then plays a streaming video. Is it worth 8k for you to implement your own video DIV?

But if you did implement your own video DIV, then implement your own text DIV too.

[hannahs83373977]

The way I found to add the video is through the component menu? This was the only way I could find how to do it?

[Colin Holgate · Accepted solution]

That's the way I would do it, but then I don't care about the 8k overhead!

If you want to add your own video to the page at run time, read discussions like this one:

javascript - Dynamically create a HTML5 video element without it being shown in the page - Stack Ove...