Es gibt zwei Möglichkeiten ein YouTube-Video in den Hotspot einer Interaktiven Grafik einzufügen.
Die Nutzung des Hotspot-Typs YouTube-Video
Die Nutzung des Hotspot-Typs Html, in dem man den entsprechenden YouTube-Einbettungs-Code einfügt
Soll einfach nur ein YouTube-Video abgespielt werden, ist der Hotspot-Typ YouTube vorzuziehen. Kopieren Sie sich hierzu die YouTube-URL z.B. via YouTubes Teilen-Funktion.
Nun entscheiden Sie sich in der Bearbeitung des Hotspots unter "Inhalt -> Art" für "YouTube-Video" und fügen die YouTube-Url (hier: https://youtu.be/iI8WX17px3A) ein.
Nur wenn Sie das YouTube-Video mit anderen Inhalten mischen müssen, empfiehlt sich der Einsatz des Hotspot-Typs Html. Hierzu setzen Sie die YouTube-Video-ID aus der Youtube-URL (im obigen Beispiel: iI8WX17px3A) in den folgenden HTML-Snippet ein:
<div class="embedded-content-youtube">
<iframe src="https://www.youtube.com/embed/<Youtube-Video-ID>" width="640" height="360" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
Diesen Snippet können Sie nun an der gewünschten Stelle in den Html-Code einfügen.
TIPP: Wenn Sie in den Abmessungen die Höhe auf 1px stellen (s.o.) passt sich der Html-Hotspot in der Höhe responsiv an den Inhalt und die Browser-Größe an.
Hintergrund: Woher kommt der YouTube-Einbettungs-Code?
Den Einbettungs-Code des Youtube-Videos erhalten Sie, wenn Sie in der Teilen-Funktion auf den "Einbetten"-Button klicken.
Um das Video responsive auszuspielen, sollte der YouTube-Einbettungs-Code auf jeden Fall mit einem <div class="embedded-content-youtube"> umgeben werden. Dies sieht dann wie oben beschrieben aus.