Text overlay on video

Question

Hi There

I have to create some HTML5 ads in Animate. They include video and text that has to show on top of the video. I'm using the video component and aware it moves to the top. To get around this I updated the HTML file so that the Z-index of the dom_overlay_container is '-1'.

This works great when the stage is transparent. The issue I have is that there are some formats where the video is not going to cover the whole stage e.g. a portrait format where I want to add the video to the middle of the ad and have a black background covering the rest of the ad.

Is it possible to do this in Animate? I essentially want 3 layers - 1) black background 2) video 3) text overlay.

My only solution now is to edit the videos in After Effects and add the black background there but this doesn't seem like the best solution.

Thanks

Kam

JoãoCésar17023019 · Answer

Hi.

You'll need to use some more CSS to create the black background behind the video. One approach would be to send the canvas to the top instead and change the dom_overlay_container's background color to black. Like this:

canvas.style.zIndex = 1;
canvas.style.backgroundColor = "rgba(255,255,255,0)";
dom_overlay_container.style.backgroundColor = "black";

Regards,

JC

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded