HA in iframe Requires Reload for card_mod

I built a VERY simple HTML page that has 3 camera feeds and a simple HA dashboard in an iframe all arranged in a table. It works amazingly well to create a page where I can watch my cameras live and also have some basic HA info such as doors that are open, buttons to move cameras, etc. I use card_mod to customize colors of the cards so an open door badge shows green, the thermostat card shows blue when the A/C is on, etc.

The problem: when I load the HTML page, more times than not, the HA frame loads but without the CSS formatting from card_mod. I can right-click the frame in the browser and click “Reload Frame” and after 1-5 tries, it will finally load properly. Sometimes it loads properly the first time, sometimes it takes a couple tries. If I open the HA dashboard natively in the browser, it works fine first time every time.

I’ve done some light searching, but I’m not a web developer so I’m not even sure what I’m looking for - but I’d like it if the frame could take the extra couple seconds or whatever’s happening to properly load the CSS from card_mod so I don’t have to do the Reload Frame trick.

Any ideas?

here’s the HTML:

<html>
<table cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
			<td colspan="2"><img src = "http://camera1.domain.com/ISAPI/Streaming/channels/102/httpPreview" width="1408" height="430" style="border:none;"></td>
			<td rowspan="2"><iframe src="http://homeassistant.domain.com:8123/lovelace-all/doors" title="Beach" width="410" height="910" ></iframe></td>
		</tr>
		<tr>
			<td><img src = "http://camera2.domain.com/Streaming/channels/1/preview"></td>
			<td><img src = "http://camera3.domain.com/Streaming/channels/1/preview"></td>
		</tr>
	</tbody>
</table>
</html>

here’s what it looks like when it doesn’t load properly (black squares for camera privacy):

here’s what it looks like when it does load properly: