Copy link to clipboard
Copied
I created an HTML5 ad in Adobe Animate. I added a video with the video component. I changed the source of the video in the code to an external link. There's a text layer above the video layer that's animated. When I publish the project and view the HTML file, the video shows, but not the text. I think the video has a higher z-index, but I can't see that in the JS code.
I tried to put the text in the DOM overlay container, but when I do that only the text shows and everything else disappears. The HTML code is as follows:
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:300px; height:250px">
<canvas id="canvas" width="300" height="250" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:300px; height:250px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
How can I modify the code to show the text on top of the video?
Also, my ad isn't showing in Edge. I set the video to autoplay and to be mute. It works in Chrome and Firefox. What could be preventing it from showing in Edge (since that is a Chrome based browser). I don't see any console errors.
Have something to add?
Find more inspiration, events, and resources on the new Adobe Community
Explore Now