YouTube Videos responsive in WordPress einbinden

wordpress

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:

csscode

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:

Klick macht größer
Klick macht größer

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…

Runde Avatare in den Kommentaren und der Autoren-Box

wordpressNoch eine Änderung…

Noch ein paar kleine Restbasteleien ergeben sich ja oft, wenn man ein Blog neu aufsetzt oder wenn man das Theme wechselt. Mir haben diese runden Avatare der Kommentatoren immer gut gefallen. Wahrscheinlich weil man sich an den “normalen” viereckigen satt gesehen hat. Und so habe ich mich im Netz mal auf die Suche gemacht, damit die Bildchen neben den Kommentaren hier auch rund werden. Naja, es war kein Hexenwerk, vielmehr war es einschließlich der Suche nach dem entsprechenden CSS-Code in knapp 10 Minuten erledigt.

Bei mir im Theme war folgendes definiert:

.comment-author .avatar { display: block; border: 5px solid #ccc; }

Diese Zeile habe ich dann einfach um folgendes ergänzt:

-webkit-border-radius: 53px; -khtml-border-radius: 53px; -moz-border-radius: 53px; border-radius: 53px; }

Fertig sieht es dann folgendermaßen aus:

.comment-author .avatar { display: block; border: 5px solid #ccc; -webkit-border-radius: 53px; -khtml-border-radius: 53px; -moz-border-radius: 53px; border-radius: 53px; }

Diesen CSS-Schnipsel habe ich ebenso im Style der Autorenbox eingefügt und nachdem man das ganze gespeichert und vorsichtshalber den Cache geleert hat, sollten dann die Avatare auch rund dargestellt werden. Und ihr werdet es kaum glauben: Es hat funktioniert! Ab heute dürft ihr mich CSS-Gott nennen oder von mir aus auch Code-Gott. Wobei sich das letztere ausgesprochen nicht wirklich gut anhört…

Allerdings muss man auch mit Einschränkungen leben. Ganz alte Browser wie zum Beispiel die immer noch sehr verbreiteten Versionen des Internet Explorer unterhalb der Version 9 ignorieren die Radius_Angaben. Deren Nutzer bekommen statt dessen das altbekannte quadratische Bildchen zu sehen. Selbst schuld, ich kann damit leben…