How to add dom container to custom html template.

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?