YouTube Videos responsive in WordPress einfügenNachdem wir letztens einen Artikel dazu hatten, wie man Google Maps responsive in WordPress einbindet, soll es heute darum gehen wie man YouTube Videos responsive in WordPress einbinden kann.

Von Haus aus passen sich Youtube-Videos nämlich derzeit immer noch nicht der Größe der umgebenden Website an. So bringt einem das schönste Responsive Theme für den eigenen WordPress-Blog nichts, wenn das Layout am Ende doch wieder von einem YouTube-Video zerfleddert wird. Doch das muss nicht sein…

Der nachfolgende Lösungsansatz gleicht dem Ansatz zur responsiven Einbindung von Google Maps in großen Teilen. Dennoch gibt es ein paar kleine Unterschiede, weshalb ich der Thematik diesen Artikel hier widme.

YouTube Videos responsive machen per DIV-Wrapper

Um zu erreichen, dass YouTube Videos sich auch in WordPress Artikeln und Seiten responsive verhalten, sprich ihr Größe den Maßen der Webseite und des umgebenden Browserfensters anpassen, müssen diese in einem div-Container eingefasst werden.

Der div-Container wiederum wird mit ein paar CSS-Befehlen versehen, sodass er sich in seiner Größe den äußeren Elementen entsprechend anpasst.

Das oben stehende Video zeigt, wie sich ein YouTube-Video in der Praxis verhält, wenn es mit nachfolgender Methode eingebunden wurde.

YouTube responsive Embed-Code

Der div-Container sieht wie folgt aus:

Der HTML-Kommentar muss im Artikel dann natürlich noch durch den normalen YouTube-Embed Code ersetzt werden. Hierbei bitte darauf achten, die Iframe-Variante des Embed-Codes auszuwählen!

Der entsprechende CSS-Code wird am besten in der custom.css des jeweiligen Themes ausgelagert.

 

Alle WordPress-Einstellungen anzeigenMit folgendem Snippets, lässt sich im Einstellungsmenü des WordPress-Backends ein Link hinzufügen, der alle WordPress-Einstellungen auf einer Seite anzeigt.

Zwar sind die Felder auf der neu angelegten Seite mit allen Einstellungen nicht immer ideal bzw. sprechend benamt, dafür bekommt man aber sehr schnell einen Überblick über alle gesetzten Parameter.

Wie die fertige/neue Übersichtsseite mit allen Einstellungen aussieht, kann man im Artikelbild dieses Beitrags erkennen.

Alle WordPress-Einstellungen einblenden

Der Code kann zum Beispiel in der functions.php eines Themes platziert werden. Wenn alles geklappt hat, taucht im Menüpunkt „Einstellungen“ im Backend ein weiterer Link namens „Einstellungen“ auf.

 

Floating Social Bar Facebook alignmentIch nutze das WordPress Plugin Floating Social Bar selbst hier im Blog. Das ist jenes Plugin, welches die Social Sharing Buttons am Anfang der Artikel einblendet. Leider gibt es mit der Darstellung des Floating Social Bar Facebook-Buttons ein kleines Problem. Im Gegenteil zu allen anderen Buttons ist der Facebook-Like Button leider um ein paar Pixel zu tief angeordnet. Das Plugin wechseln stellt jedoch auch keine Option dar, denn die asynchrone Umsetzung und der Rest des Plugins sind einfach perfekt.

Floating Social Bar Facebook-Button ausrichten

Mit folgendem kurzen CSS-Code lässt sich der Facebook-Button dann auch korrekt ausrichten, sodass er sich in einer Reihe mit allen anderen Sharing-Buttons befindet. Der Code kann einfach in der custom.css bzw. style.css des eigenen Themes eingefügt werden.

 

Google Maps responsive EmbedcodeUm Google Maps responsive im eigenen Blog einzutragen ist ein wenig CSS-Code nötig. Anderenfalls zerfleddert die eingebundene Google Karte leider das ganze Design, sobald sich die Größenverhältnisse der umgebenden Seite ändern, da der originale Einbettungscode leider nicht responsive ist – sprich seine einmal vorgegebene Größe immer beibehält.

Der ganze Trick, um Google Maps fit für Responsive Design zu machen, ist, die Karte in einem DIV-Container einzubetten. Dieser DIV-Container wird mit dem passenden CSS-Code versehen und erzwingt dann, dass die Karte sich ebenfalls den Größenverhältnissen anpasst.

Als erstes wird der normale Google Maps Embed-Code benötigt. Dieser kann direkt aus der Google Maps Webseite entnommen werden. Als Beispiel dient der Screenshot am Anfang des Artikels. Der Embed-Code sollte dann wie folgt aussehen.

Basierend auf diesem standard Einbettungscode folgen nun die Anpassungen zum Responsive Design.

Google Maps resposive machen

Zuerst benötigen wir folgenden CSS-Code. Dieser kann entweder innerhalb <style>-Tags oder in der style.css-Datei des Themes eingefügt werden.

Nun müssen wir nur noch den Google Maps Einbettungscode in einem DIV-Container einfassen, der die CSS-Klasse g-maps zugewiesen bekommt.

Der fertige Einbettungscode sollte dann wie folgt aussehen.

Wie das Endergebnis in der Praxis aussieht, könnt ihr euch auf der Kontaktseite hier im Blog anschauen.