Vimeo sauber in WordPress einbinden

Nachdem ich beschrieben habe, wie man YouTube-Videos im Blog einfügt, kommt jetzt das Tutorial für Filme hinterher, die bei Vimeo liegen. Wer Ideen hat, für welche Videoseiten ich auch noch was schreiben sollte: Einfach Kommentar hinterlassen.

Vimeo gibt im Standard-Embed-Code zwar eine Fallback-Lösung mit, aber wir wollen es ja bei unserem Blog/Feed einheitlich anzeigen: YouTube- und Vimeo-Videos im selben Layout.

Zuerst öffnet Ihr direkt bei Vimeo das Video, welches Ihr einbetten wollt. Bei Vimeo ist die Video-ID viel einfacher zu finden, denn sie steht direkt hinter dem Schrägstrich und wird, wie schon bei der YouTube-Variante, für den Shortcode benötigt. Da wäre sie:

http://www.vimeo.com/4167288

Nun legt Ihr einen neuen Blogartikel zum Testen an und fügt dort den folgenden Shortcode ein, mit dem dann alles ins Rollen kommt. Das Minus im Code musste ich verwenden, damit er nicht in diesem Artikel angewendet wird – das also bitte weglassen:

[-vimeo]4167288[/vi]

Wenn Ihr Euch die Vorschau des Artikels anschaut, wird kein Video zu sehen sein, sondern nur der eben eingegebene Shortcode. Es fehlt nämlich noch der Code, welcher in die functions.php des Themes kommt und den Shortcode in (X)HTML umwandelt.

Hinweis: Wer keine Ahnung hat, sollte lieber jemand ranlassen, der sich auskennt oder besser gleich darauf verzichten. Ich übernehme keine Haftung für Schäden. Außerdem bin ich ein mieser Programmierer: Was bei mir funktioniert, muss nicht überall laufen.

Verbesserungsvorschläge nehme ich daher dankend an.

Auch hier wieder der Hinweis: Aufpassen! Im schlimmsten Fall könnte das ganze Blog zerlegt werden. Falls keine functions.php im Theme-Ordner liegt, muss sie neu erstellt werden. So sieht der Code aus, der nun in die Datei eingefügt werden muss:

function vimeo($atts, $content) {
return '<iframe src="http://player.vimeo.com/video/'.$content.'" width="612" height="344" frameborder="0">
<a href="http://vimeo.com/'.$content.'" title="Video bei Vimeo ansehen"><img src="[ABSOLUTE_URL]/vimeo.png" border="0" alt="Video bei Vimeo ansehen" /></a>
</iframe><br />
<small><a href="http://www.vimeo.com/'.$content.'" title="Video bei Vimeo ansehen">Video bei Vimeo ansehen</a></small><br />';
}

add_shortcode("vimeo", "vimeo");
add_filter('the_excerpt', 'do_shortcode');

Die Werte width=“612″ height=“344″ und [ABSOLUTE_URL]/vimeo.png müsst Ihr individuell an Euer Blog anpassen: Findet heraus, wie breit das Video bei Euch sein muss. Teilt das durch 16 und multipliziert mit 9. Schon habt Ihr die Höhe für ein Video im Standard-Format 16:9.

Die vimeo.png* ist die Ersatzgrafik, welche anstelle des Videos gezeigt wird – falls nötig. Zeile 9 könnt Ihr weglassen, wenn Ihr den YouTube-Code verwendet habt. Dort ist sie nämlich auch schon drin und doppelt braucht man die nun wirklich nicht.

Wenn alles richtig gemacht wurde und Ihr die Vorschau des Test-Artikels neu ladet, müsste nun statt des Shortcodes das Video angezeigt werden. Durch die iframe-Einbindung ist sogar die HD-Version direkt im Artikel abrufbar. Das sieht in unserem Fall so aus:


Video bei Vimeo ansehen

Im Feed wird nun – wie auch schon im Fall von YouTube – entweder das Video, die Ersatzgrafik oder der Link zum Video angezeigt. Jeder Leser merkt also gleich, dass ihm möglicherweise ein Film entgeht und er wird ihn sich extern ansehen.

* Die Datei vimeo.png muss selbst erstellt werden.

4 Kommentare zu diesem Artikel

Name: Tilo  |  Datum: 31. Mai 2011  |  Zeit: 12:56

Danke, genau das habe ich gesucht! Weiter so!

Name: SeriousM  |  Datum: 7. Juli 2011  |  Zeit: 22:37

Super, vielen Dank!!

Name: DerDickeBlog  |  Datum: 5. November 2012  |  Zeit: 09:01

In Zeile 9 ist ein Syntaxfehler. Da braucht do_shortcode noch ein führendes SingleQuote

Name: Falk  |  Datum: 5. November 2012  |  Zeit: 10:04

Der Code ansich ist richtig. Leider hat das Intypo-Plugin aus den „normalen“ Anführungszeichen die typographisch richtige Entsprechung (vorne unten, hinten oben) gemacht. Das habe ich bei der Installation nicht gecheckt.

Habe es jetzt deaktiviert und nun stimmt es. Danke für den Hinweis. :-)

Hinterlasse einen Kommentar





Alle mit * gekennzeichneten Felder müssen ausgefüllt werden. Die eMail-Adresse wird nicht offen dargestellt.

Ich erlaube mir, reine Werbeeinträge oder persönliche Beleidigungen zu löschen. Anonyme Kommentare werden generell nicht mehr freigeschaltet: Ich schreibe hier als reale Person und darf erwarten, dass jeder zu der Meinung steht, die er äußert.