Comme je ne suis pas du genre Ă rester sur une question en suspens, voici le css pour les iFrame 
<iframe width=100% height=100% allowtransparency="true" frameBorder="0" srcdoc='
<body style="background-color:transparent"><script type="text/javascript"></script>
<p style="color:#fff">12345</p>
</body>'></iframe>
Testé sur Mozilla, Edge et Chrome
Si je reprends un widget complet fourni ici :
ça donne :
<iframe width=100% height=100% allowtransparency="true" frameBorder="0" srcdoc='
<link rel="stylesheet" href="assets/lib/gce-glyph/gce-glyph.min.css">
<body style="background-color:transparent">
<script type="text/javascript">
/* Get state and set widget */
function init() {
let lockColor,
lockIcon,
stateMsg;
getState((ipx) => {
let garageState = ipx.ioRelayState[0]; // Isolated relay state
if (garageState == "off") {
lockColor = "#FF0000"; // red
lockIcon = "icon-lock-open_security";
stateMsg = "Porte ouverte";
} else if (garageState == "on") {
lockColor = "#32CD32"; // green
lockIcon = "icon-lock_security";
stateMsg = "Porte fermée";
}
setIcon(lockIcon, lockColor);
setMessage(stateMsg, lockColor);
setState(garageState, lockColor);
});
}
/***/
/* Get data from API */
function getState(cb) {
fetch("/api/system/ipx?ApiKey=API_KEY", {method: "GET"}).then((ret) => { // Get IPX object
ret.json().then((ipx) => {
cb(ipx); // Return IPX state from API
});
});
}
/***/
/* Set icon and color */
function setIcon(icon, color) {
let myIcon = document.getElementById("myIcon");
myIcon.style.color = color;
myIcon.className = "";
myIcon.classList.add("gce-glyph");
myIcon.classList.add(icon);
}
/***/
/* Set state message */
function setMessage(text, color) {
let msg = document.getElementById("myStateMsg");
msg.style.color = color;
msg.innerHTML = text;
}
/***/
/* Set garage state */
function setState(text, color) {
let garage = document.getElementById("myGarageState");
garage.style.color = color;
garage.innerHTML = text;
}
/***/
/* Auto refresh (optional) */
function autoRefresh() {
setInterval(() => {
init();
}, 1000); // 1 sec
}
/***/
init();
autoRefresh(); // Optional
</script>
<table width="100%" style="padding: 10px">
<tr style="display: flex; align-item: center; justify-content: space-between">
<!--Icon -->
<td>
<i id="myIcon" class="gce-glyph"></i>
</td>
<!---->
<!-- State message -->
<td>
<span id="myStateMsg" style="font-size: 15px"></span>
</td>
<!---->
<!-- Garage state -->
<td>
<span id="myGarageState" style="font-size: 15px;"></span>
</td>
<!---->
</tr>
</table>
</body>
'></iframe>
