Support » Allgemeine Fragen » 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]

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)
  • Hallo @fabiande

    edit:
    hatte zuerst auf der funktionierende Website geschaut.

    Nun aber zu fehlerhaften: Wenn du in die DEV-Tools des Browsers schaust, werden 1.668 Fehler angezeigt.

    Hauptsächliche Fehlermeldungen:
    failed to load resource: net::ERR_Blocked_by_client

    Vielleicht helfen dir diese Lösungswege weiter:
    https://www.google.com/search?q=failed+to+load+resource%3A+net%3A%3AERR_Blocked_by_client

    Thread-Ersteller Fabi-An

    (@fabiande)

    Hallo @la-geek
    Danke schon mal für diese Info aber irgendwie werde ich daraus nicht schlau.
    Das meiste was ich gefunden habe weißt darauf hin das solche Blocks von Ad-Blockern (Oder ähnlichen Plugins) stammen, was soweit auch richtig aussieht da immer „*googleads.*“ blockiert wird. Doch diese Blocks erscheinen auch wenn ich den Adblocker deinstalliere. (Bild)
    Standartmäßig nutze ich Firefox, wenn ich das ganze in Chrome teste (Keinerlei erweiterungen installiert) dann sehe ich keine Fehlermeldungen (zumindest nicht in diesem Zusammenhang) in der Console aber die eingebetteten Videos sind trotzdem nicht sichtbar. (Bild)
    Das selbe habe ich auch in Edge versucht hier werden mir hingegen deutlich mehr Fehlermeldungen angezeigt, dort wird der Aufruf von so gut wie jeder YouTube URL durch die Tracking prevention untersagt. Allerdings verstehe ich leider nicht wieso oder wie ich das beheben kann. (Bild)
    Seltsam finde ich vor allem das ja das zum Start angezeigte Video ohne Probleme angezeigt wird nur die Versteckten laufen nicht sauber.

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)