Video mit Shortcode ohne Plugin in WordPress einbinden

Es gibt jede Menge Plugins um in WordPress Videos per Shortcode einzubinden, aber was macht man, wenn man jetzt über ein Jahr ein Plugin mit einem bestimmten Shortcode benutzt hat und dieser dann mit der neuesten WordPressversion (in meinem Fall 3.1) nicht mehr zuverlässig funktioniert? Tja, das habe ich mich auch gefragt. Ich bin kein Profi und habe mir erstmal die Finger wund gegeoogelt und auch einige Lösungen gefunden.

Ohne Plugin

Ziel war es, komplett weg vom WordPress-Plugin zu kommen und die neue Lösung natürlich mit dem alten Shortcode lauffähig zu machen. Der bisherige Shortcode war:

Gar nicht so einfach, denn alle Lösungen die ich fand, wollten im Shortcode einen Parameter übergeben, als z.B. [videoplattform id=”IxA_w0lKUbw”].

Ein kleiner Hilferuf über Twitter rief Jan-Hendrik von beuth-it.de auf den Plan, der mir spontan seine Hilfe angeboten hat. Ein paar Nachrichten später, war es dann auch vollbracht.

Die Lösung

An sich gar nicht so kompliziert, wenn man allerdings nicht weiß, wo man anfangen muss, eher schwierig. Ich habe jetzt eine Lösung für YouTube und Vimeo eingebunden, welche jeweils noch einen zusätzlichen Direktlink zum Video für mobile Besucher hinzufügt.

In die functions.php eures Themes muss folgender Code eingefügt werden, um dann später ein YouTube-Video anzuzeigen. [Update: Wer eine Lightbox nutzt, schaut mal hier.]

  function youtube ($id)
       {
         return '<div class="vidembed"><iframe title="YouTube video player" width="610" height="373" src="http://www.youtube.com/embed/'.$id[0].'" frameborder="0" allowfullscreen></iframe><br/>
		 <a href="http://www.youtube.com/watch?v='.$id[0].'" rel="nofollow" title="Video direkt aufrufen">YouTube-Direktlink</a></div>';
       }
       add_shortcode('youtube', 'youtube');

Für Vimeo funktioniert es im Grunde genommen genau so, da ist nur der Code zum Einbetten etwas anders.

 function vimeo ($id)
       {
         return '<div class="vidembed"><iframe src="http://player.vimeo.com/video/'.$id[0].'" width="610" height="373" frameborder="0"></iframe><br/>
		 <a href="http://vimeo.com/'.$id[0].'" rel="nofollow" title="Video direkt aufrufen">Vimeo-Direktlink</a></div>';
       }
       add_shortcode('vimeo', 'vimeo');

In der style.css eures Themes kann die Optik noch etwas angepasst werden.

.vidembed { text-align:center; alignment:center; margin: 5px 0; font-size: 8pt;}

Am Ende sollte es ausschauen, wie auf folgendem Bild. Solltet ihr ein mobiles Theme benutzen, müsst ihr das in diesem natürlich auch einfügen. Plugin gespart und funktioniert. 🙂