How to add dom container to custom html template.

[PATurmel12]

I am using Adobe Animate HTML5 with a custom HTML template. In the Animate publish settings I have 'Make Responsive by Width' and 'Scale to Fill Visible Area (Stretch to Fit)' checked.

I want to add an underlay container (under the canvas), and have it treated the same as the dom_overlay_container.

This is the code I have for the canvas div:

<div id="$ANIM_CONTAINER_ID" style="position: absolute; background-color:transparent;      width:$WTpx; height:$HTpx;z-index: 3">
     <div id="dom_underlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx;      height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">
     <iframe id="iframe2D" src='grid/grid12.html' width='0' height='0' style="float: left"></iframe>
     </div>
     <canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display:   $CANVAS_DISP; background-color:transparent;"></canvas>
     <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx;    height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">
     </div>
     </div>

What changes do I have to make in the custom HTML or Animate so the underlay container is treated the same as the overlay container?

[ClayUUID]

In your generated HTML, there's a line something like:

AdobeAn.makeResponsive(true,'width',true,1,[canvas,anim_container,dom_overlay_container]);

Try adding your custom container to the array in the last argument. The variables passed into this array are set earlier in the code, so you'll have to do something like:

AdobeAn.makeResponsive(true,'width',true,1,[canvas,anim_container,dom_overlay_container,document.getElementById("my_underlay_container")]);

[PATurmel12]

Thanks ClayUUID,

That answer is acceptable, there were a couple of other adjustments in the HTML.