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. 🙂

7 Kommentare
  1. Lukas

    Hallo Rene,

    habe gerade nach der gleichen Problemlösung gesucht, aber eine einfachere Methode gefunden:
    Unter dem zu verlinkenden Video findest Du bspw. bei Youtube einen Button „Einbetten“. Dieser liefert Dir folgenden Code:

    Diesen kannst Du in der HTML-Ansicht direkt in Deinen Artikel einfügen.
    Schöne Grüße
    Lukas

    1. René Hesse

      Hey, den Code kenne ich natürlich, mir ging es aber gerade darum, diesen nicht zu nutzen, sondern das Video einfacher einzubinden. Sollte sich der Code mal ändern, kann ich dies global ausführen und der Direktlink wird auch automatisch eingebunden.

  2. Marcel

    <p>Wenn es nun nicht darum geht, alte Shortcodes am laufen zu halten (welche man auch global in der Datenbank ersetzen könnte), so ist das Ganze doch dank oEmbed noch viel einfacher: Einfach URL in den Editor kopieren und glücklich sein. Evtl. noch die Größe in den Einstellungen der Mediathek anpassen und gut.</p><p>Hatte dazu auch mal einen kurzen Artikel verfasst: http://nikonierer.de/videos-wordpress-oembed/</p><p>Gruß Marcel</p>

    1. René Hesse

      Danke, diese Möglichkeit kenne ich auch, ich wollte lieber eine eigene Lösung,da ich dann sofort die Embed-Codes selber anpassen und ändern kann und dies auch global ausgeführt wird.

  3. Klaus

    Vielen Dank für den Code, finde ich sehr nützlich!
    So habe ich immer die Möglichkeit, den Shortcode anzupassen, falls sich da etwas ändert.
    Ansonsten muss man ja jede Seite ändern. Daher: top!

  4. Chris

    Vielen Dank für den Tipp. Funktioniert erstklassig!

  5. Michele Laki

    Hallo,
    ich komme überhaupt nicht weiter…
    am Browser funktioniert alles, nur auf meiner mobilen Seite geht es nicht.
    Was muss ich den einfügen damit mein video auch auf meiner mobilen Seite zu sehen ist.

    Vielen dank im voraus…

Schreibe einen Kommentar    

Deine E-Mail-Adresse wird nicht veröffentlicht. Durch das Absenden eines Kommentars stimmst du der Speicherung deiner Angaben gemäß der Datenschutzerklärung zu.

Du bist hier: FLIP.de / Coding & Publishing / ...