Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Animated Text over embedded video in HTML5 ad

New Here ,
Apr 09, 2025 Apr 09, 2025

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. 

TOPICS
Ad development , Code , How to
107
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation