Displaying animated content above HTML5 video

[clickdrag]

Hi,

I am making an animated HTML5 banner ad with Animate CC that uses video. I used the video component, but all of my other content is hidden behind the video when I view it in the browser.

After searching online for a solution I eventually found this code, which I added to the timeline:

var dom_container = document.getElementById("dom_overlay_container");

dom_container.style.zIndex=-1;

I don't fully understand the code. It seemed to fix the problem, but then I found that when I included a poster image with the attached video, the poster image obscures the video, because I presume the above code puts the video behind the poster image.

So, I cannot use a poster image with the video. Does anyone know a solution to this?

I'm surprised and disappointed that something as basic as putting animated content over video is not properly supported in Animate CC, and that I have to search for obscure code online to include something which is so essential to making video based banner ads. Or is there some obvious feature of Animate CC that I am not using properly?

Any advice would be greatly appreciated. Thanks

[chenjil43641795]

I also want to know how to adjust the depth of the element.

Z-Index seems to be for the whole canvas, not for the components.

If it is clicked I will use

var a2=this.a2

a2.on("mousedown", function (evt) {

this.parent.addChild(this);

        });

But adjusting the hierarchy of individual elements still doesn't know how to use.

I hope someone can give me an answer.

[Joseph Labrecque · Accepted solution]

This is the way components work within HTML5 Canvas components in Animate. There is a DOM overlay that is created as all components are DOM elements and not a part of the canvas element. The DOM overlay layer always appears overlaying the canvas layer. This is just how it works.