Videos in WordPress 3.6+ zentrieren

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 10 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet ...

WordPress bietet seit der Version 3.6 an Videos direkt einzubetten, ohne die Nutzung eines Plugins. Die Umsetzung basiert auf MediaElement.js von John Dyer. Mit dem dazugehörigen Shortcode kann man die Breite des Videos anpassen, aber ausrichten (zum Beispiel zentrieren) kann man die Videos leider nicht. Hier kommt der Workaround dazu!

Für alle oEmbeds und auch für den Video-Shortcode wird die Breite des Inhalts als Standard angenommen. Das Theme definiert also in der functions.php eine Breite für den Content. Wird jetzt ein Video eingebunden per Link oder per Shortcode ohne Breitenangabe, dann gilt für das Video als Breite die Standardbreite für den Inhalt. Hochskalierte Videos sollten aber vermieden werden, da sie schnell sehr pixelig werden, also wird dem Video eine explizite Breite gegeben.

Leider bietet der Shortcode keine Ausrichtung als Parameter an, wie ein Blick in die Funktion bestätigt. Um das Video zu zentrieren müsste das umgebende DIV per CSS ansprechbar sein, aber WordPress gibt dem DIV keine Klasse oder ID mit, also müssen wir die Größenangabe noch einmal wiederholen. Wir wrappen den Shortcode in ein DIV mit der gewünschten Größe (hier 640 Pixel), zentrieren es, indem wir die Seitenabstände auf „auto“ stellen und um ein responsives Einbinden der Videos zu ermöglichen, stellen wir die Maximalbreite auf 100%, damit die Videos gegebenenfalls klein skaliert werden.

Der gesamte Code sieht dann so aus:

<div style="width:640px; margin: 0 auto; max-width: 100%;">
[[video src="http://example.org/wp-content/uploads/2013/08/Video.mp4" width="640"]]
</div>

Ein rechtsbündiges Ausrichten könnte per floating erreicht werden. Hierzu wird statt der automatischen Seitenabstände einfach rechts gefloatet. Danach muss das floating natürlich ggf. durch ein „clear“ wieder aufgehoben werden (sofern das Umfließen mit Text nicht gewünscht ist).

<div style="width:640px; float:right; max-width: 100%;">
[[video src="http://example.org/wp-content/uploads/2013/08/Video.mp4" width="640"]]
</div>
<div style="clear: both"></div>

Habe ich etwas übersehen? Gibt es einen einfacheren Weg Videos zu zentrieren oder rechtsbündig darzustellen? Schreib‘ es mir in den Kommentaren!

3 Antworten auf Videos in WordPress 3.6+ zentrieren

  1. Das war das Beste, was ich je gelesen habe!
    Alles andere, was so woanders vorgeschlagen wurde – Null!
    Danke!
    Beste Grüsse
    Lutz

  2. Vielen Dank! Der erste Eintrg der das Problem wikrlich lösen konnte! NICE JOB!

  3. Extrem gut. Die erste Lösung, die wirklich funktioniert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert