Direktlinks auf Positionen in eingebetteten YouTube-Videos

Wer direkt auf bestimmt Positionen innerhalb von YouTube-Videos verlinken möchte (um nicht ein 10-Minuten-Video verlinken zu müssen bei dem dann niemand genau weiß, welche Stelle denn nun gemeint ist), kann das seit einiger Zeit mit einer Angabe in der URL tun. Die Details finden sich im Beitrag Direktlinks auf Positionen in Youtube-Videos.

Direktlinks auf Positionen in YouTube-Videos

Kurz gesagt: es ist einfach die Angabe der Minuten und Sekunden in der Video-URL anzuhängen. Also zum Beispiel so:

https://www.youtube.com/watch?v=uqHd_Y3LOc0

wird zu:

https://www.youtube.com/watch?v=uqHd_Y3LOc0#t=0m40s (Link ausprobieren)

So kann man direkt zur Minute 0 und Sekunde 40 springen. Es funktioniert auch, wenn „t“ als normaler URL-Parameter übergeben wird, aber die oben genannte Möglichkeit ist die offiziell von Google propagierte.

Direktlinks auf Positionen bei eingebetteten Videos

Die gleiche Möglichkeit besteht beim Einbetten der Videos: im erstellten iFrame-Code wird einfach die Angabe der Minuten und Sekunden an die URL angehängt. Das sieht das beim oben genannten Beispiel so aus:

<iframe src="https://www.youtube.com/embed/uqHd_Y3LOc0?rel=0#t=0m40s" frameborder="0" width="420" height="315"></iframe>

und funktioniert auch reibungslos (nach dem Klick auf den Abspielbutton geht es direkt bei 40 Sekunden los):

Eine weitere Möglichkeit gibt es allerdings: was, wenn das Video schon eingebettet ist und ich unter dem Video mehrere Sprungmarken als Link einfügen will, die dann zur jeweiligen Stelle im Video springen? Innerhalb von Videos gibt es das in Form der Anmerkungen, aber „von außerhalb“ und ohne ein Neuladen der Seite?

Ich habe mal eine Weile darüber nachgedacht und eine Lösung entwickelt:

Links als Sprungmarken zu Positionen in eingebetteten YouTube-Videos

Der Einbettungscode wird über ein iFrame realisiert. Das iFrame ist quasi eine eigene Website mit einer spezifischen Adresse. Diese kann ich auch ändern – zum Beispiel über Javascript. Und genau das machen wir jetzt:

Zuerst wird dem erzeugten iFrame-Code eine ID verpasst, damit wir später darauf zugreifen können:

<iframe id="video" src="https://www.youtube.com/embed/uqHd_Y3LOc0?rel=0#t=0m40s" frameborder="0" width="420" height="315"></iframe>

In diesem Fall habe ich mich für die ID „video“ entschieden. Diese könnte aber auch anders heißen. Nun erstellen wir zwei Links unterhalb des Videos, die „nirgendwohin“ führen, bzw. zu einem leeren Anker (#):

<a href="#">Link Position 1</a>
<a href="#">Link Position 2</a>

Diese bewirken genau nichts. Als onClick-Event fügen wir nun einen Javascript-Aufruf ein, der die Quelle des iFrames austauscht:

<a onclick="document.getElementById('video').src='https://www.youtube.com/embed/uqHd_Y3LOc0?rel=0#t=0m10s'; return false;" href="#">Link Position 1</a>
<a onclick="document.getElementById('video').src='https://www.youtube.com/embed/uqHd_Y3LOc0?rel=0#t=0m40s'; return false;" href="#">Link Position 2</a>

Das „return false;“ dient dazu, den Link (in dem Fall nur „#“) nicht wirklich auszuführen (im Fall dass Javascript aktiv ist), sondern nach der Anweisung einfach abzubrechen. Ansonsten würde der Browser nach dem Klick wieder nach ganz oben springen, wenn schon ein wenig heruntergescrolled wurde, was etwas verwirrend sein kann.

Das führt allerdings noch nicht zum gewünschten Ergebnis. Ursache: die beiden Links unterscheiden sich von der derzeitigen Quelle des iFrames (src) nur durch die Angabe nach der Raute (Anchor Link). In solch einem Fall wird das iFrame nicht neu geladen, sondern der Browser versucht, an die entsprechende Stelle der im iFrame angezeigten Seite zu springen. Da der Anchor-Link mit dem Namen „t=0m10s“ jedoch nicht existiert, passiert gar nichts.

Um dieses zu verhindern, hängen wir einfach einen weiteren „echten“ Parameter an die Video-URL an, der zwar nicht benötigt wird, dem Browser (und so dem iFrame) signalisiert, dass es sich um eine ganz andere Internetadresse (und so um ein vermutlich völlig anderes Dokument) handelt. Ich habe hier wollkürlich den Parameter „pos“ gewählt und mit 1 und 2 durchnummeriert:

<a onclick="document.getElementById('video').src='https://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&pos=1#t=0m10s'; return false;" href="#">Link Position 1</a>
<a onclick="document.getElementById('video').src='https://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&pos=2#t=0m40s'; return false;" href="#">Link Position 2</a>

Nun wird beim Klick auf den Link das Dokument innerhalb des iFrames neu geladen. Allerdings bin ich noch nicht ganz zufrieden, da es wenig Sinn macht, direkte Sprungmarken anzubieten und dann das Video erst nach einem Klick auf den Play-Button abzuspielen. Somit fügen wir noch einen weiteren Parameter hinzu, der dafür sorgt, dass das YouTube-Video sofort nach dem Laden abgespielt wird:

autoplay=1

Der fertige Code für eine Video-Einbindung mit Links als Sprungmarken auf Positionen im eingebetteten Video sieht also wie folgt aus:

<iframe id="video" src="https://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&autoplay=1#t=0m40s" frameborder="0" width="420" height="315"></iframe>
<a onclick="document.getElementById('video').src='https://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&autoplay=1&pos=1#t=0m10s'; return false;" href="#">Link Position 1</a>
<a onclick="document.getElementById('video').src='https://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&autoplay=1&pos=2#t=0m40s'; return false;" href="#">Link Position 2</a>

Und hier könnt Ihr Euch ein Bild von der funktionierenden Lösung machen:

Link Position 1 Link Position 2 (Link 1 springt zu 10 Sekunden, Link2 zu 40 Sekunden)

Ein kleiner „Nachteil“ soll nicht verschwiegen werden: wenn das Video schon durch den ersten Ladevorgang komplett zwischengespeichert ist, dann sorgt ein Klick auf einen anderen Positionslink für ein erneutes Laden des Videos ab der Stelle – also etwas weniger effizient als es sein könnte, aber dafür schön einfach umzusetzen.

Viel Spaß beim Einbetten und Direktlinken von Youtube-Videos! 🙂