Man hat einen YouTube Channel und möchte die Videos daraus auch auf der eigenen Website einbinden. Nachfolgend zeige ich euch einen Weg, wie das recht einfach über die YouTube API v3 funktioniert.
Man kann das Ganze manuell machen indem man zu jedem Video das Codeschnipsel zur Einbettung in die eigene Website integriert. Das bedeutet aber, dass ich mit jeden neuen Video Upload auch meine Website aktualisieren muss. Abhilfe schafft hier die von YouTube bereitgestellte API v3 mit der ich in der Lage bin, Channel-, Playlist- und Videoinformationen abzurufen und zu verarbeiten. Da dieser Abruf immer auf den aktuellen Inhalten meines YouTube Channels basiert, werden somit auch die eingebundenen Videos auf der Website automatisch aktualisiert. Ein weiterer Vorteil der YouTube API ist, dass man die Ausgabe auf der eigenen Website flexibel steuern kann, meine Demo zeigt hier nur 3 verschieden Möglichkeiten.
Schritt 1 – Voraussetzungen
Um die YouTube API v3 nutzen zu können benötigen wir ein Google/YouTube Konto und einen YouTube API Key. Das Tutorial beschränkt sich jetzt darauf entweder alle Channel Videos auszulesen oder nur Videos einer bestimmten Playlist. Für beide Varianten benötigen wir die spezifische Playlist ID. Die API selbst bietet darüber hinaus viele weitere Möglichkeiten Videos auszulesen (z.B. Kategorie, Searchstring). Ich gehe davon aus, dass ein gefüllter YouTube Channel bereits vorhanden ist und somit auch ein Google Konto. Starten wir mit;
YOUTUBE API KEY BESORGEN
Hier Google API Console einloggen! Die Google API Console ist die zentrale Anlaufstelle für alle Google APIs. Um nun einen YouTube API Key zu generieren am besten dieses Video anschauen.
PLAYLIST ID BESORGEN -> ALLE CHANNEL UPLOADS
Die Playlist ID kann ich durch Aufruf meiner YouTube Channel Infos ermitteln. Tauscht einfach “DEIN YOUTUBE USERNAME” mit euren Usernamen und führt die Anfrage aus. Unter dem Formular könnt ihr im Bereich “Response” das Ergebnis der Abfrage ablesen. Der Code hinter “uploads” entspricht dabei der gewünschten Playlist ID. Darüber hinaus kann ich hinter “id” auch meine Channel ID ermitteln.
PLAYLIST ID BESORGEN -> VIDEOS EINER BESTIMMTEN PLAYLIST
Die ID einer bestimmten Playlist erhalte ich ebenfalls über den Google API Explorer. Dazu benötige ich meine Channel ID, die ich entweder im internen YouTube Bereich unter “Einstellungen” ablesen kann oder ich nutze oben gezeigte Abfrage der Channel Uploads, die mir gleichzeitig auch meine Channel ID ausgibt. Hier kann ich mir alle Channel Playlists anzeigen lassen. “DEINE CHANNEL ID” mit eurer Channel ID ersetzen und Abfrage ausführen. Im “Response” Bereich unter dem Formular findet ihr dann eine Übersicht eure Playlists. Identifiziert anhand des “title” die gewünschte Playlist. Wir benötigen dann den Code hinter “id“, welcher in der Regel mit PL.. beginnt.
Schritt 2 – Youtube API abfragen
Im Grunde haben wir oben bereits die Youtube API abgefragt und wie ihr vielleicht gesehen habt, konnte man im Bereich “Request” unter dem Formular die Abfrage selbst ablesen. Das folgende Beispiel ist von mir bereits vorbereitet und holt alle relevanten Infos zu Videos einer Playlist ab. Die Anzahl ist dabei auf 0-50 Videos begrenzt, möchtet ihr mehr ausgeben lassen, dann benötigt ihr eine Paging Funktion, auch hierfür bietet die API Einsatzmöglichkeiten auf die ich jetzt aber nicht eingehe, da das Tutorial “quick & dirty” zum Ergebnis führen soll.
MUSTER API ABFRAGE:
Was macht diese API Abfrage jetzt eigentlich? Sie generiert eine JSON Datei! JSON ist ein Datenformat zum Datenaustausch, ähnlich einer XML Datei nur deutlich kompakter. Ersetzt am besten oben gezeigte Musterabfrage mit eurer Playlist ID und eurem API Key und ruft die Abfrage im Browser auf. Dort ist sehr schön Struktur und Aufbau einer JSON Datei zu erkennen.
Schritt 3 – Verarbeitung der API Abfrage mit PHP
Zur Verarbeitung einer JSON Datei stehen in allen wichtigen Programmiersprachen Möglichkeiten zur Verfügung. Ich werde in meinen Beispielen dafür PHP verwenden und in Kombination mit HTML und CSS eine Ausgabe erzeugen. Da die API Abfrage eine Datei erzeugt fangen wir damit an die Datei mittels PHP zu lesen. Dazu gibt es zwei gängige PHP Funktionen, zum einen “file_get_contents” und die “cURL” Funktion. Ich werde Zweitere nutzen, weil sie mich nach dem Lesen von René Galubas Blogartikel mehr überzeugt. Das Codeschnipsel zum cURL Aufruf einer Datei habe ich anhand des Beispiels auf Renés Seite übernommen.
Gehen wir kurz durch den Code. Die get_data() Funktion erleichtert das Datei lesen und ist auch für andere Dateien wiederverwendbar und nicht auf die JSON Datei der Youtube API beschränkt. In der $api Variable speichern wir den API Aufruf. Das Ergebnis ist wie erwähnt im JSON Format angelegt. Um es jetzt mit PHP verarbeiten zu können, müssen wir es erst umformatieren. Die PHP Funktion json_decode() formatiert JSON Inhalte zu einem PHP Array, mit der Zusatzanweisung true geben wir an, dass es sich um einen assoziativen Array handeln wird. Der assoziative Array wird in der Variable $video gespeichert, mit der wir jetzt weiterarbeiten.
4. Schritt – Ausgaben erzeugen
Grundlage für alle Ausgaben ist jetzt unser PHP Array $video (Demo Array). Mit den Schritten 1 – 3 haben wir die Pflicht erledigt, kommen wir nun zur Kür. Arbeiten wir uns Stück für Stück durch den Array und nutzen Schleifen zur Ausgabe. An dieser Stelle möchte ich mein Array Tutorial empfehlen, welches unter anderem zeigt wie man auf Einzelwerte in verschachtelten Arrays zugreift. Im Folgenden werde ich zwei Varianten vorstellen.
Ausgabe im abspielbaren Iframe
Das ist im Grunde die minimalste Form der Einbindung. Aus dem $video Array benötige ich dazu lediglich die Video ID. Den Code zum Einbetten via Iframe gibt es als Beispiel unter jedem Video bei Youtube. Um hier die Ausgabe zu erzeugen, reicht es die entsprechende Video ID mit der Video ID aus unserem Array zu ersetzen. Die foreach Schleife sorgt dafür, dass alle Videos meines Arrays ausgegeben werden. Ich habe den Iframe in einen div Container gepackt, so kann ich via CSS das Styling beeinflussen.
Mit diesem CSS Schnipsel werden die Videos nebeneinander angezeigt, ansonsten ist die Beispielseite unformatiert. Über die Standardeinbettung hinaus bietet YouTube erweiterte Optionen, diese könnt ihr mit der YouTube Player API testen und euch so den gewünschten Einbettcode zusammenbasteln.
Ausgabe als Thumbnail mit Titel Lightbox Verlinkung
Dieses Beispiel greift auf mehrere Werte meines $video Arrays zurück. Neben der Video ID benötige ich den Video Titel und ein Video Thumbnail. Die CSS Formatierung ist wieder minimal gehalten, damit ihr diese Beispielseite als Grundlage für eure eigene Lösung nutzen könnt. Für diese Variante benötigt ihr ein zusätzliches Lightbox Plugin. Die meisten Lightbox Scripte verfügen über die Abspielfunktion von Videos, mein Standard Lightbox Plugin ist Magnific Popup. Die folgend gezeigte Einbindung der Lightbox bezieht sich daher auf dieses Plugin. Hier könnt ihr natürlich auch jede andere YouTube fähige Lightbox nutzen.
Wie oben bereits erwähnt, ist das eine “quick & dirty” Lösung, welche für viele Einsatzzwecke ausreichen sollte. Für diejenigen die umfangreicher mit Google APIs oder mit mehreren Google APIs gleichzeitig arbeiten möchten, stellt Google für alle wichtigen Programmiersprachen eine Google API Client Library zur Verfügung. Diese bedarf zwar der Einarbeitung, bietet dann aber eine strukturierte und umfangreiche Kontrolle bei der Arbeit mit Google APIs.