iframe nach einblendung unsichtbar

Hallo zusammen,
Ich weiß nicht ob das hier der Richtige Ort für die Frage ist aber ich versuche es einfach mal.

Ich habe in den letzten Wochen meine ehemalige Jimdo homepage zu WordPress umgezogen und diese nun endlich Online, allerdings habe ich ein seltsames Problem bei einer meiner unterseiten.
Auf dieser Seite habe ich einen HTML Block eingebettet welcher mit hilfe eines Scripts verschiedene YouTube iframes ein- und wieder ausblenden kann.
Leider werden mir die iframes nach dem einblenden nicht angezeigt. Ich sehe aber das sie sauber angezeigt werden und auch die ein / ausblendung funktioniert.
Wenn ich den HTML Code als einzelnes File aufrufe funktioniert auch alles wie es soll und auf der ehemaligen Seite ( https://fabi-an.jimdofree.com/musical )
funktioniert der selbe HTML Block auch ohne Probleme.
Ich habe versucht verschiedene Browser zu nehmen oder auch Mobil aber immer das selbe. Das erste iframe was am anfang angezeigt wird ist zu sehen alle versteckten sind nach einblendung quasi unsichtbahr.

Hat jemand eine Idee wieso das unter WordPress nicht funktioniert über all anders aber ohne probleme läuft?

Hier noch mein Quellcode:

<script language="JavaScript" type="text/javascript">
//<![CDATA[
var text = new Array();
text[0] = '2019';
text[1] = '2018';
text[2] = '2016';
text[3] = '2017';
text[4] = '2015';
text[5] = 'trailer';
text[6] = 'makeoff';
text[7] = '2014';
text[8] = '2013';
text[9] = '2012';
text[10] = '2011';
text[11] = '2010';
// usw.

function blenden(id) {
    if(document.getElementById(id).style.display=="none") {
    for(i=0;i<text.length;i++) {
    document.getElementById(text[i]).style.display="none";
    }
    document.getElementById(id).style.display="block";
    }
    else {
    document.getElementById(id).style.display="none";
  }
}
//]]>
</script>
<ul>
    <li>
        <a onclick="blenden('2019')" class="link">2019 - Verspielte Sommerliebe</a>
        <div id="2019" style="display:block">
            <div id="videobereich">
                <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/aEaKlFnQBko" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </li>

    <li>
        <a onclick="blenden('2018')" class="link">2018 - Das Puppenhaus</a>
        <div id="2018" style="display:none">
            <div id="videobereich">
                <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/fuaA3KydQm8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </li>

    <li>
        <a onclick="blenden('2017')" class="link">2017 - Geröllkinder</a>
        <div id="2017" style="display:none">
            <div id="videobereich">
                <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/T6qcEqO-eHE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </li>

    <li>
        <a onclick="blenden('2016')" class="link">2016 - Viel Lärm um nichts</a>
        <div id="2016" style="display:none">
            <div id="videobereich">
                <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/4wWomFH2prw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </li>

    <li>
        <a onclick="blenden('2015')" class="link">2015 - Bittersüß</a>
        <div id="2015" style="display:none">
            <div id="videobereich">
                <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/Q_hOAiKxHCo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </li>
<ul>
            <li>
                <a onclick="blenden('trailer')" class="link">Bittersüß Trailer</a>
                <div id="trailer" style="display:none">
                    <div id="videobereich">
                        <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/MqoglYXIcH4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
                    </div>
                </div>
            </li>
            <li>
                <a onclick="blenden('makeoff')" class="link">Making of 2015</a>
                <div id="makeoff" style="display:none">
                    <div id="videobereich">
                        <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/SLlrv-ISuBM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
                    </div>
                </div>
            </li>
    </li>
</ul>
    <li>
        <a onclick="blenden('2014')" class="link">2014 - Eine Volmondnacht mitten im Sommer</a>
        <div id="2014" style="display:none">
            <p>
                <u style="text-decoration-color: #ff0000;"><span style="color: #ff0000;"><strong>Dieses Video ist leider unvollständig!</strong></span></u>
            </p>

            <p>
                Auf Grund eines technischen Defekts fehlt leider das Ende dieses Musicals, Ich bitte um Entschuldigung.
            </p>

            <div id="videobereich">
                <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/HGmSSwCqxY0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </li>

    <li>
        <a onclick="blenden('2013')" class="link">2013 - Noch 5 Minuten, Danke!</a>
        <div id="2013" style="display:none">
            <div id="videobereich">
                <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/gIP35P-QR5U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </li>

    <li>
        <a onclick="blenden('2012')" class="link">2012 - Schmetterlinge</a>
        <div id="2012" style="display:none">
            <div id="videobereich">
                <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/5MrSnqMwgKE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </li>

    <li>
        <a onclick="blenden('2011')" class="link">2011 - Verspielte Sommerliebe</a>
        <div id="2011" style="display:none">
            <div id="videobereich">
                <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/ioP-Nvkeybw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </li>

    <li>
        <a onclick="blenden('2010')" class="link">2010 - Taras Laden</a>
        <div id="2010" style="display:none">
            <div id="videobereich">
                <iframe loading="auto" class="videoextern" width="560" height="315" src="https://www.youtube.com/embed/NxsJTVV6CUM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
            </div>
        </div>
    </li>
</ul>

Und hier sind die beiden extra CSS Klassen die ich benutze

#videobereich {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}       
.videoextern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Vielen Dank schon mal für die Hilfe.
Mit freundlichen Grüßen
Fabi-an

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]