embedded YouTube - Startbild erst nach Klick laden

[Linuchs]

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

[Linuchs]

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>