Responsive Videos in WordPress ohne Plugin - - archiviert

Responsive Videos in WordPress ohne PluginDieser Inhalt wurde archiviert, da er nicht mehr aktuell oder relevant ist.

Ohne responsive Videos macht ein responsive Webdesign nur wenig Sinn.  Genau über dieses Problem bin ich im Zuge eines Relaunch gerade gestoßen.

Grund hierfür ist, dass WordPress mit Bordmitteln (mit und ohne Jetpack) ja die Einbindung von Videos wirklich einfach gestaltet, nur werden diese eben nicht auf die passende Größe des wiedergebenden Gerätes angepasst. Folge: Das Design, dass sich so wunderbar auf alle Devicegrößen anpasst ist genau an dieser Stelle im Eimer.

Ein Plugin muß her, war mein erster Gedanke und mit einer kurzen Suche über Google bin ich auf einen Code Snippet auf ALXMEDIA gestoßen. 

Responsive Videos in 2 simplen Schritten:

Im ersten Schritt wird die functions.php des verwendeten WordPress Themes um folgende Funktion erweitert:

PHP Code für functions.php:

Den PHP Code am besten am Ende der existierenden functions.php einfügen, so das der schließende PHP Tag ?> in der letzten Zeile steht.

Mit dieser kurzen Erweiterung in der functions.php wird das notwendige DIV Element im ausgegebenen HTML Code erzeugt, dass im Anschluß per CSS responsive deklariert werden kann. Dies geschieht mittels der nachfolgenden 2 Zeilen die in der style.css des Themes eingefügt werden müssen.

Der zweite und auch schon letzte Schritt, besteht darin die Datei style.css um die notwendigen CSS Klassen zu erweitern.

 CSS Code für style.css:

Und schon werden die eingebundenen Videos responsive ausgeliefert. Die dargestellte Breite entspricht immer 100% des umschließenden Containers.

Beispiel:

Um das responsive Verhalten zu testen, einfach das Browserfenster verkleinern oder vergrößern oder die Seite über das Smartphone aufrufen.

Tipp:

Am besten macht man solche Änderungen bzw. Ergänzungen aber nicht in den Original Dateien des Themes, sondern führt diese über ein Child-Theme ein. Nur so ist man sicher, dass eigene Anpassungen auch nach einem Update des Themes noch vorhanden sind.

    Klaus