Linuchs: embedded YouTube - Startbild erst nach Klick laden

problematische Seite

Moin,

ich binde den von youtube (YT) angebotenen embedded-code in meine HTML Seiten ein.

Problem: Ohne Zustimmung des Lesers wird YT schon kontaktiert und das Startbild geladen:

<iframe style="border: 1px solid #ccc; border-radius:5px;" width="560"
height="315" src="https://www.youtube.com/embed/-b5B-9aCAeE"
frameborder="0" allow="accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>

Anders bei audio-tags, da schreibe ich preload="none"

Ich möchte das YT Startbild mit Gimp erstellen und zeigen, aber erst bei Klick soll Verbindung aufgenommen werden zu YT.

So geht es nicht:

<iframe onclick="this.src='https://www.youtube.com/embed/-b5B-9aCAeE'"
style="border: 1px solid #ccc; border-radius:5px; overflow:hidden"
width="560" height="315" src="img/youtube_tesla_coils.jpg"
frameborder="0" allow="accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>

Auch die Angabe overflow:hidden wird vom iframe ignoriert, das aber nur nebenbei.

Wo liegt der Fehler?

Gruß, Linuchs

  1. problematische Seite

    habe etwas weitergefrickelt. Diese Lösung (unten auf der Seite) funktioniert, erscheint aber umständlich:

    <div style="position:relative;width:560px;height:315px;
    border: 1px solid #ccc; border-radius:5px; overflow:hidden;background:url(img/youtube_tesla_coils.jpg)"
    onclick="document.getElementById('YT').style.display='block';
    document.getElementById('YT').src='https://www.youtube.com/embed/-b5B-9aCAeE';">
      
      <iframe id="YT" style="position:absolute;left:0;top:0;display:none;
    z-index:1" width="560" height="315" frameborder="0" allow="accelerometer;
    autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
    
      <p style="position:absolute;left:10%;top:10%;color:#fff">Klick startet Youtube-Video<br>Click to start Youtube video<br>Klik om Youtube video te starten</p>
    </div>