Direktlinks auf Positionen in eingebetteten YouTube-Videos

YouTube LogoWer 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:

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

wird zu:

http://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="http://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&start=40" 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="http://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&start=40" 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='http://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&start=10'; return false;" href="#">Link Position 1</a>
<a onclick="document.getElementById('video').src='http://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&start=40'; 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='http://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&pos=1&start=10'; return false;" href="#">Link Position 1</a>
<a onclick="document.getElementById('video').src='http://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&pos=2&start=40'; 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="http://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&autoplay=1&start=10" frameborder="0" width="420" height="315"></iframe>
<a onclick="document.getElementById('video').src='http://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&autoplay=1&pos=1&start=10'; return false;" href="#">Link Position 1</a>
<a onclick="document.getElementById('video').src='http://www.youtube.com/embed/uqHd_Y3LOc0?rel=0&autoplay=1&pos=2&start=40'; 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! 🙂

10 Gedanken zu „Direktlinks auf Positionen in eingebetteten YouTube-Videos“

  1. Danke, das hat mir sehr weitergeholfen!^^

  2. Kann man einen Einbettungscode z.B. von einer TV-Webseite auf youtube kopieren? Bzw. Wie muss man vorgehen, damit man keine Urheberrechte verstöst. Ich möchte Beiträge für den Spachunterricht benutzen und dann Übungen herstellen. Ich finde es schade, dass man die informativen Beitrãge nicht benutzen kann.

    1. Das hängt ganz von der Website ab. Grundsätzlich kann Dir immer nur der Rechteinhaber die Einbettung erlauben. Bei YouTube werden sehr viele Videos hochgeladen, für die keine entsprechenden Rechte beim Uploader vorliegen.

      Wenn es sich z.B. um ein Musikvideo handelt das im offiziellen YouTube-Account des Labels hochgeladen wird und der Einbettungscode unten sichtbar ist, dann sollte es kaum Probleme geben. Aber bei Videos, die in irgendeinen Noname-Account hochgeladen werden (z.B. Video von einer TV-Sendung eines bekannten Senders) ist relativ klar, dass hier keine Erlaubnis vorliegt (manchmal gibt es auch offizielle Channels der TV-Sender – das ist dann was anderes). Das muss im Einzelfall nicht zu einem Rechtsstreit führen – aber es ist alles andere als „safe“ und oft ein Verstoß gegen geltendes Recht.

      Im Zweifelsfall das Video einfach nicht nutzen, wenn Du die Rechtesituation nicht klären kannst. Ist zwar – wie Du schon sagst – schade, aber so bist Du auf der sicheren Seite.

      1. Lieber Gabriel

        Danke für die Antwort. Ich werde mich bei den Sendern erkundigen.

        Gruss

        Chris

  3. Die Direktlinks auf Positionen in eingebettete Youtube-Videos funktionieren nicht (mehr?). Es wird immer von Anfang an abgespielt.

    1. Danke für den Hinweis. Ich werde mir das mal vornehmen und schauen, ob es eine funktionierende Lösung gibt.

  4. Es geht relativ einfach auch für eingebettete Videos innerhalb der einbettenen Seite:

    Einfach nicht
    #0m30s
    sondern
    &start=30
    anhängen

    1. Danke für den Hinweis, Mark. Ich habe die Lösung oben wieder entsprechend angepasst. Das ging ja schon ein paar Mal hin und her bei YouTube mit den Parametern…mal schauen, wie lange es diesmal funktioniert… 😐

  5. Danke für deine tolle Beschreibung!

    Eine Frage zum Parameter „start“: Muss hier immer die Zeit in Sekunden angegeben werden oder gäbe es eine elegantere Lösung (beispielsweise start=2m13s anstelle start= 133)?

    1. 😀 gern!

      Ich habe es einfach ausprobiert – bei mir hat es nur mit der Angabe der Sekunden funktioniert und nicht mit einer „menschenlesbaren“ Zeitangabe (habe verschiedene Varianten getestet).

Schreibe einen Kommentar