Beiträge zu “youtube”

Jekyll: (Even) Bettertube

Auf einigen meiner Jekyll Blogs verwende ich das Plugin Bettertube. Damit kann man verhindern das das Video direkt von Youtube geladen wird. Es wird statt dessen ein Thumbnail angezeigt und erst wenn man auf den “Playbutton” drückt wird das Video gestartet.

Leider gab es immer noch den Download des Thumbnails von Youtube beim Aufruf der Seite durch den Benutzer. Das Bild unten zeigt die Abfrage.

Mit dieser kleinen Änderung kann dies abgeschaltet werden. Beim erstellen der Seite wird das Thumbnail heruntergeladen und in ein Verzeichnis geladen. Dieses dann statische Bild wird beim Erzeugen der Site als Hintergrundbild verwendet.

Es fehlt noch eine Fehlerbehandlung wenn das Thumbnail nicht gefunden wird oder wenn man vielleicht ein eigenes verwenden möchte.

   thumbnail = "<figure class='BetterTube' data-youtube-id='#{id}' data-player-width='#{w}' data-player-height='#{h}' id='#{id}' style='padding-bottom: #{padding_bottom}'><a class='BetterTubePlayer' href='http://www.youtube.com/watch?v=a_426RiwST8' style='background: url(/youtube/#{id}.jpg) 50% 50% no-repeat rgb(0, 0, 0);'></a><div class='BetterTube-playBtn'></div>&nbsp;</figure>"
   padding_bottom = ("%.2f" % intrinsic).to_s  + "%"
   url = "https://img.youtube.com/vi/#{id}/hqdefault.jpg"
   download = open(url)
   IO.copy_stream(download, "youtube/#{id}.jpg")
10.5.18
Weitere Beiträge zu: jekyll   youtube  

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.

 

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.

12.12.15
Weitere Beiträge zu: jekyll   youtube  

Dies ist ein privater Blog von Hagen Bauer- berufstätiger Vater, Ehemann, Naturliebhaber, Läufer, Zelter, technikverliebt.


Creative Commons License
This blog is licensed under a Creative Commons License