YouTube-Videos responsive in ein WordPress-Blog einbinden, das ist auch so eine Sache die ich schon eine gefühlte Ewigkeit vor mir her schiebe. Dabei ist es eigentlich überhaupt kein Hexenwerk, so etwas ohne zusätzliches Plugin zu bewerkstelligen. Also habe ich mir eben mal ein Stündchen Zeit genommen, per Lieblingssuchmaschine beim Geiststreicher die entsprechenden Zutaten abgefischt, im Theme-CSS eingebettet, die bisher hier veröffentlichten 10 Videobeiträge entsprechend geändert und fertig ist die Laube.
Man nehme folgenden CSS-Code und trage ihn im entsprechenden Stylesheet des Themes (bei mir: resposive.css) ein:
Möchte man ein nun ein Video im Blog einbetten, ohne dass dieses auf dem Smartphone gleich das komplette Layout verzerrt fügt man folgendes ein:
Dabei ist darauf zu achten, dass man die Iframe-Variante des Embed-Codes auswählt. Die center-Befehle innerhalb der div-Container habe ich im übrigen von mir aus dazu gefügt, ich habs gerne mittig. Kann man also auch weglassen, dann steht das Video linksbündig im Beitrag. Und nun sollte auch das eingebettete nachfolgend Video maßstabgerecht auf dem Smartphone anzuschauen sein. Bei mir jedenfalls klappt es…
Warum so kompliziert? Das Zauberwort heißt schlicht und ergreifend oEmbed. Einfach den URL des Videos in eine eigene Zeile schreiben, und gut. Funktioniert mit YouTube und Vimeo, aber auch zum Einbinden von Tweets oder Instagram-Bildern und vieles mehr.
Videos werden dann einfach auf 100% Breite des verfügbaren Bereiches skaliert. Egal, ob du den 70-Zöller im Wohnzimmer ansteuerst, oder das Smartphone-Display herhalten muss. Einzige Voraussetzung: in der funtions.php des Themes sollte die maximale Breite definiert sein:
if ( ! isset( $content_width ) ){
$content_width = 670;
}
Wobei die 670 natürlich an die bei dir verfügbare Breite anzupassen ist.
Was WordPress in Sachen oEmbed unterstützt, findest Du hier:
https://codex.wordpress.org/Embeds
Ist noch nicht zu mir durchgedrungen, danke für die Info…
Es gibt auch ein Plugin, das oEmbed in Kommentaren aktiviert. Heist
Shit Smartphone… Heißt dann sinnigerweise oEmbed in Comments, hab nur gerade den Link nicht parat.
Für die Kommentare brauche ich nix, hier sollen ja keine Videos eingebunden werden…