Pb CSS animation responsive

Hello à tutti,

J'ai un petit souci avec une animation html 5 que je ne parviens pas à afficher en full screen sur smartphone.

L'animation est prévue pour être responsive.

Elle fonctionne bien y compris sur smartphone en full screen hors site, ce que vous pouvez constater ici : https://eclairagepublic.net/anim-une-zygs/anim-test.html

En revanche, lorsque je veux l'intégrer au site sur lequel elle doit s'afficher, je ne parviens pas à lui faire prendre l'ensemble de l'écran : https://allzygs-emqh9k5kue.live-website.com.

On m'avait conseillé de l'intégrer en iframe avec un shortcode :
<iframe src="https://eclairagepublic.net/anim-une-zygs/anim-test.html"></iframe>

Et une CSS appropriée :

.tailleiframe {
overflow: hidden;
padding-top:0%;
position: relative;
}

.tailleiframe iframe {
border: 0;
left: 0;
position: absolute;
top: 0;
height: 100%;
width: 100%;

}

.is-frontend #content .sections, .is-frontend #content-holder .sections {
    margin-top:0
}

Doit y avoir un problème de CSS, mais je ne pense pas que ce soit celle de la classe ".tailleiframe".
Serait-ce celui du thème de wordpress sur lequel je suis ?

Je m'arrache les cheveux depuis ce matin et je ne saisis pas ce qui ne va pas...

Bon ok suis chauve, donc c'est pas bien grave pour les cheveux, mais j'en perds la tête, ça c'est plus embêtant... :/

Merci pour votre aide !