Transparent button over video background

Report · Jan 29, 2018

Is it possible to overlay buttons over top of the MP4 video component in an HTML5 canvas project? When I tried they were hidden underneath. Even though on top in timeline.

Trying to create a video player with looping background and when user touches screen anywhere timeline goes to menu. (the old Encore DVD days, I know )

thanks in advance, rg

Report · Jan 29, 2018

The easiest solution might be to also use an HTML5 component for the button. Then it should stay on top of the video. You might also be able to put the listener on to the video component, and have no button.

Report · Feb 01, 2018

You can put the canvas over the video.

Create a video-under.css file, then link that css file to your project.

#canvas{

z-index: 1;

}

#ID_OF_VIDEO{

z-index: 100;

}

Replace "ID_OF_VIDEO" with the instance name you give the video component on stage.

Good Luck!

Report · Feb 01, 2018

it will be fine just

#dom_overlay_container {

z-index: -1;

}

and transparent canvas background

Report · Oct 18, 2022

but where exactly do you place this code? can anyone spare more details on this process for a noob!

#dom_overlay_container {

z-index: -1;

}

Report · Oct 18, 2022

that would be inserted into your html file (which is overwritten, unless you edit your publish settings) within style tags or just add z-index:-1 to your inline #dom_overlay_container style property.

ie, change your publish settings so you stop overwritting your html.

(but this won't work unless you can publish a transparent stage, ie edit the html again to change the animation_container and canvas element styles:

</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 0); width:962px; height:541px">
<canvas id="canvas" width="962" height="541" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0);"></canvas>
<div id="dom_overlay_container" style="z-index: -1;pointer-events:none; overflow:hidden; width:962px; height:541px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>

OR:

1.change your stage to be transparent (click stage>properties panel>stage>color swatch>alpha 0

2.publish or test.

3.now change the publish settings>html/js>untick overwrite html

4.now you need only change the z-index in the dom_over_layer container as shown above

Report · Oct 18, 2022

Brilliant! Thank you so much Kglad!

I followed your directions the simpler ones here:

1.change your stage to be transparent (click stage>properties panel>stage>color swatch>alpha 0

2.publish or test.

3.now change the publish settings>html/js>untick overwrite html

4.now you need only change the z-index in the dom_over_layer container

So I just added that code snippet you said to that area:

"z-index: -1"

so it looked like this:

<div id="dom_overlay_container" style=" z-index: -1;pointer-events:none; overflow:hidden;

Report · Oct 18, 2022

you're welcome.

Report · Oct 18, 2022

here is my crappy example test case but I am psyched...I am working on doing choose your own adventure videos and animations with my high school students...

https://storm5.s3.amazonaws.com/stormyweather2.html

Report · Oct 18, 2022

be careful about posting links that are unrelated to a current issue/problem/solution. it doesn't take much to get banned here if you're perceived as a spammer/self-promoter.

Report · Oct 19, 2022

oh good tip, thank you!

Report · Oct 19, 2022

you're welcome.

(btw, having something i enjoyed viewing, and was clearly not commercial in nature, didn't hurt your case.)