iframe doesn't show up after display stile is changed

[fabi-an]

Hello,
I don't know if this is the right place but I have a Java script which should hide and show YouTube videos depending on the link you clicked.
The script works perfectly fine in every editor I tried and on my old homepage it works as intended. But somehow on my new homepage the videos don't show up,
it looks like the videos are transparent and I have no idea why.

Here is the script I'm using

<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';


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')">2019 - Verspielte Sommerliebe</a>
        <div id="2019" style="display:block">
            <div id="videobereich">
                <iframe class="videoextern" src="https://www.youtube.com/embed/aEaKlFnQBko" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>
            </div>
        </div>
    </li>

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

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

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

    <li>
        <a onclick="blenden('2015')">2015 - Bittersüß</a>
        <div id="2015" style="display:none">
            <div id="videobereich">
                <iframe class="videoextern" src="https://www.youtube.com/embed/Q_hOAiKxHCo" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>
            </div>
        </div>
    </li>
		<ul>
            <li>
                <a onclick="blenden('trailer')">Bittersüß Trailer</a>
                <div id="trailer" style="display:none">
                    <div id="videobereich">
                        <iframe class="videoextern" src="https://www.youtube.com/embed/MqoglYXIcH4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>
                    </div>
                </div>
            </li>
            <li>
                <a onclick="blenden('makeoff')">Making of 2015</a>
                <div id="makeoff" style="display:none">
                    <div id="videobereich">
                        <iframe class="videoextern" src="https://www.youtube.com/embed/SLlrv-ISuBM" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>
                    </div>
                </div>
            </li>
    
		</ul>
    <li>
        <a onclick="blenden('2014')">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 class="videoextern" src="https://www.youtube.com/embed/HGmSSwCqxY0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>
            </div>
        </div>
    </li>

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

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

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

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

And here are the links:
Old homepage - working
New homepage - broken

I would really appreciate any kind of help or suggestions.

Thanks in advance.
Fabi-An

[Ingolme]

One of the many Javascript files that your website is including is setting the width and height of the <iframe> elements to zero. I suspect it might be one of the lazy loading scripts, but I don't have a way to find out which script.

[fabi-an]

Oh wow, somehow I totally missed that.
That was way easier to fix than I thought, thank you very much.