Eigenen YouTube Player durch Playlist der Let’s Play-Serie ergänzen

Zuvor haben wir uns ein Child-Theme mit einem einfachen YouTube Player mit benutzerdefinierten Feldern gebastelt. Was aber, wenn man nicht nur das Video, sondern dazu die komplette Playlist mitsamt aller zur Serie gehörenden Videos auf die eigene Webseite bannen möchte? Vielen Dank an Chris für den zur Frage leitenden Kommentar. 

Warum eigentlich nicht gleich so?

Die Grundidee hinter der Entscheidung nicht auf die YouTube-eigene Playlist-Funktion zurückzugreifen rührt daher, dass wir unsere Videos mittels der WordPress-Kategorien selbst ordnen und als Serie darstellen wollen. Zugegeben, unser YouTube-Player bietet bisher noch nicht viel in diese Richtung. Ich finde aber, dass das Einbetten der großen Playlist am Ende neben Spielereien wie einer möglichen Folgen-Navigation, vielleicht zuviel des guten sein könnte.

Eventuell versuche ich das in der Praxis aber auch mal aus. Außerdem gibt es vielleicht ja auch Personen, denen das so bereits für ihren Zweck reichen würde. Deshalb im Folgenden in Anlehnung auf den bisher erschaffenen YouTube-Player eine mögliche Variante dessen.

Die Idee

Das Einbetten eines Videos inklusive der dazugehörigen Playlist ist nicht aufwendiger als das Einbetten eines Videos alleine. Wir müssen lediglich an die Stelle, wo auch die ID des jeweiligen Videos im Quellcode Platz findet, mit einem „?list=“ die ID der passenden Playlist anhängen.

Das Video sollte sich dazu auch wirklich innerhalb dieser Playlist befinden und man sollte die Playlist innerhalb den Einstellungen als Haupt-Playlist festlegen. Sonst könnte es zu Problemen oder Fehlern kommen. Da es aber weiter in der Richtung nichts zu beachten gilt, sollte das doch machbar sein.

Wir könnten nun – wie wir das bereits mit der Video ID handhaben – die Playlist ID mithilfe eines benutzerdefinierten Feldes in jedem Artikel abspeichern und an der richtigen Position auslesen lassen. Dies wäre aber nur sinnvoll, wenn wir nur wenige, einzelne Videos mit einer Playlist versehen möchten. Sonst wäre es einfach zu aufwendig, das für alle Videos einzeln machen zu müssen, wie es bei der Video ID sinngemäß sein muss.

Die Playlist ID ist aber konstant, für jeden Artikel der einer Playlist angehört, bleibt diese gleich. Hier kommt der Let’s Play Gedanke ins Spiel: Alle Videos einer Let’s Play-Serie möchten wir ja in der selben Kategorie, die wir nach dem Spieltitel benannt haben, unterbringen. Wir können an geeigneter Stelle also auch einfach eine Abfrage der Kategorie einfügen und bei der passenden Kategorie die Playlist übergeben. Für unser System hätten wir also schon eine Lösung!

youtube playlists

So sieht’s aus: Die YouTube Playlisten-Funktion in unserem Player.

Die Umsetzung

Was wir dafür jetzt machen müssen, benötigt in der Grundform nur ein paar Zeilen, die wir zum YouTube Player in seiner ursprünglichen Version hinzufügen müssen.

<? // YouTube Player
	$youtube_IDs = get_post_custom_values( 'youtube_id' );
   // Erweiterung 
     $category = get_the_category(); 
	 switch($category[0]->cat_ID){
		 case "3": 
		 	$playlist_ID = "PL2K6HRX6WSspmySGuf7uefUJQ_G-kUKPp";
		 break;
		// ...
	 }
	// Ende der Erweiterung
	if(is_single() && $youtube_IDs){
  ?>
<div id="youtube-player">
        <iframe width="1040" height="585" src="//www.youtube.com/embed/<? echo $youtube_IDs[0]; /* + Erweiterung */ if($playlist_ID){ echo "?list=".$playlist_ID; }; /* Ende */ ?>" frameborder="0" allowfullscreen></iframe>
</div>
<? } ?>

Die Erweiterung ist als solche durch einen Kommentar im Quellcode gekennzeichnet. Kurz erklärt: Wir ermitteln die IDs der Kategorien des aktuellen Artikels und speichern diese in dem Array $category. Uns interessiert aber nur das erste (und geplant einzige) Feld dieses Arrays, also $category[0].

Wir verwenden dann eine Switch-Abfrage, um die erste Kategorie des Arrays (=> $category[0]) zu prüfen. Wenn ein Fall zutrifft, es sich also um eine für uns interessante Kategorie handelt, speichern wir die passende Playlist ID innerhalb der Variable $playlist_ID. Im Player selbst folgt dann noch die Prüfung, ob diese Variable gefüllt wurde. Falls ja, wird die Playlist wie gewünscht hinzugefügt.

Das bedeutet, wollen wir einer weiteren Kategorie eine Playlist zuordnen, müssen wir einen neuen Fall innerhalb dieser Datei manuell hinzufügen. Dazu ermitteln wir zuerst die ID der betreffenden Kategorie. Diese können wir wie im Beispiel zusammen mit der dazugehörigen Playlist ID (die man durch den Link dieser erhält) zu einem neuen Fall innerhalb des switches zusammensetzen. Sieht so aus:

...
	 switch($category[0]->cat_ID){
		 case "3": // ID der Kategorie
		 	$playlist_ID = "PL2K6HRX6WSspmySGuf7uefUJQ_G-kUKPp"; // Die Playlist ID
		 break;
		 case "42": // Gleiches Prinzip: Andere Playlist für andere Kategorie
		 	$playlist_ID = "PL2K6HRX6WSsql61LUbpXVqnYpIxfUQWFj";
		 break;
		// ...
	 }
...

In diesem Beispiel haben wir also für die Kategorien mit der ID 3 und 42 jeweils eine Playlist verknüpft. Weitere Informationen zur Einbindung und Verwenden des Quellcodes gibt es in der ursprünglichen Version.

Jens Jakob

Autor, Fotograf, Videoproduzent... und mehr - oder weniger. Ich mache, worauf ich Lust habe. Auf lichtbahn.de schreibe ich über eben solche vielseitige Themen, was mich interessiert, was ich mache und was mich antreibt. Viel Spaß beim Lesen!

10 Kommentare:

  1. Hallo Jens,

    danke für das Tutorial. Leider muss ich sagen, dass einige Sachen hier für „Anfänger“ wirklich schwer zu verstehen ist, deswegen brauche ich deine Hilfe:

    1) Welches Theme muss ich aktivieren? Das Eltern- oder Child-Theme? Ich habe noch nie in WordPress mit Child-Theme gearbeitet.

    2) Ich habe das benutzerdefiniertes Feld aktiviert und genauso eingetragen wie im Tutorial. Was passiert denn nun? Denn so werden meine Videos nicht angezeigt. Du wolltest noch darauf zurück kommen, allerdings in den weiteren Tutorials wurde das nicht mehr erwähnt.

    Diesen Beitrag habe ich auch nur zur Hälfte verstanden, aber damit beschäftige ich mich morgen (ist schon spät). Evtl. brauche ich da auch deine Hilfe.

    Ich wäre dir dankbar, wenn du mir hierbei helfen könntest und auch die beiden Fragen beantwortest.

    Vielen Dank!

    • Hallo Lena! Vielen Dank fürs Feedback. Wollte das ganze insgesamt ein wenig detaillierter gestalten und mit Videos untermauern. Bisher bin ich aber leider noch nicht dazu gekommen. Ich hoffe dir trotzdem weiterhelfen zu können, indem ich die Fragen beantworte. Auch wenn das nun schon bisschen spät kommt – sorry dafür :)

      1) In diesem Fall musst das Child Theme aktivieren. Dieses beinhaltet die gewünschten Anpassungen und greift sonst auf das Eltern Theme zurück.

      2) Naja, das ganze ist ja so gedacht, dass du pro WordPress Artikel sozusagen eine YouTube ID abrufst und somit jeweils ein Video einbindest. Wenn du den obigen Code dabei an der passenden Stelle eingefügt hast und die benutzerdefinierten Felder den richtigen Namen tragen, sollte an entsprechender Stelle dann auch das Video auftauchen. Du kannst ja einmal „Iconic Two“ ausprobieren, das Child Theme zu „Iconic One“ welches ich als Beispiel erstellt habe (müsstest du beide Themes installieren und wie gesagt das Child Theme nutzen).

      Das was ich in diesem Artikel angesprochen habe ist dabei völlig optional. Ich habe selbst an meiner Let’s Play Webseite in letzter Zeit einiges geändert (http://breathlp.de/) und nutze es in der Form auch nicht.

      Für weitere Rückfragen kannst du mir auch gerne eine E-Mail übers Kontaktformular schreiben. Die Kommentare gehen leider häufig ein wenig unter, weshalb ich darauf leider nicht so schnell reagiere..

  2. Hey Jens
    Ich hoffe ich nerve nicht.
    Hatte dir eigentlich ne Nachricht bei YouTube geschickt, aber da scheinst du nicht mehr Aktiv zu sein darum einach hier ein Kommentar.
    Hab eine Frage bezüglich WordPress. Kann man das auch so hin bekommen das die auflistung der Videos/Playlisten so wie bei Pietsmiet. de aussehen, also das die neusten Videos auf der Seite automatisch aufgelistet werden?

    Vielleicht kannst du mir das ja erklären, wenn nicht auch nicht schlimm. Fragen kostet ja nix ;-)

    Gruß Chris

    • Hey Chris, du nervst selbstverständlich nicht. Ich freue mich über Anregungen und jegliches Feedback. Ich schreibe ja die Artikel, um zu helfen. Wenn ich euch da ein wenig entgegenkommen kann ist das ja umso besser :D

      Ja, für YouTube habe ich momentan überhaupt keine Zeit. Deshalb kann ich dort auf sowas leider nicht reagieren, weil ich es einfach nicht mitbekomme. Tut mir leid :)

      Die Seite finde ich persönlich optisch nicht wirklich ansprechend.. Aber ich kann mal schauen :D

      Da müsstest du nur genauer beschreiben, was du mit der Artikelauflistung meinst. Meinst du die Auflistung auf der Startseite von denen, wo man die neuen Folgen angezeigt bekommt?

      • Ja die auf der Startseite genau, Ja Design ist mir eigentlich wumpe, darüber kann man sich immer streiten. mir geht es ja darum wie man die Videos aufgelistet bekommt so das man gleich drauf klicken kann, vielleicht auf der eigene Seite anzeigen lassen oder verlinken lassen auf youtube. Ich weiß auch nicht ob es möglich ist das er das automatisch aktualisiert oder man es immer selber posten muss.

        • Das wird er wohl so machen, wie ich das auch beschreibe. Das scheint nämlich die normale Ausgabe der Artikel von WordPress zu sein. Jedes Video stellt dabei bei ein Video dar. Und die neusten werden simpel inklusive Thumbnail ausgelesen.

  3. Vielen dank, echt perfekt erklährt, bitte lösche sowas nie wieder. Hast mir sehr geholen. Natürlich steigen die Ansprüche wenn man erstmal was hat (z.B. das Aussehen der auflistung ), aber leien wie mich reicht das erstmal und vielleicht kommen ja noch mehr solche hilfreichen Tipps von dir. Besten Dank :-)

Kommentar verfassen - Was meinst du dazu?