Jekyll: Youtube Videos einbinden

Natürlich kann man Youtube Videos einfach über den normalen von Youtube vorgegebenen IFrame einbinden. Ich mache das nur ausgeprochen ungern weil zum einen damit auch Informationen über meine Leser an Youtube gegeben werden und zum anderen diese Abfragen auch die Ladezeit der Webseite erhöhen.

Bettertube ist ein Jekyll Plugin das hier mit einer kleineren Anpassung Abhilfe schaffen kann.

Einfach das Bettertube.rb in das _plugins Verzeichnis legen und die Javascript / CSS Dateien in die Webseite einbinden.

Dann braucht Ihr Euch nur noch die ID des Videos zu nehmen und mit dem Tag

 {% youtube sPZK8w55cBQ %}

in dem Text einfügen. Es wird dann durch das Plugin ein HTML Tag generiert der automatisch das von Youtube definierte Thumbnail für das Video und einen “Play Button” einbindet. Erst nachdem ein Leser den Play Button klickt wird der Player von Youtube geladen.

Datenschutzhinweis - Dieser Link startet einen externen Abruf des Videos bei Youtube

Damit kann man sicherstellen das der Aufruf von Youtube nicht auf die Ladezeit Einfluss nimmt.

Leider wird immer noch ein Aufruf an Youtube gesendet. Um den Aufruf des Thumbnails auszuschalten und gleichzeitig die Möglichkeit zu haben ein eigenes Bild für den Hintergrund zu verwenden habe ich folgenden kleine Anpassung vorgenommen.

In Plugin Bettertub.rb bei der Definition des Plugins

 http://img.youtube.com/vi/#{id}/hqdefault.jpg

gegen

 /images/youtube/#{id}

tauschen. Wenn man dann in einem neuen Verzeichnis /images/youtube das gewünschte Hintergrundbild unter dem Dateinamen “youtube-id” ablegt wird einem dieses gewünschte Bild als Hintergrund angezeigt und es erfolgt auch keine Abfrage bei Youtube.