YouTube-Videos responsive in WordPress-Blogs und statische Webseiten einbetten

Christoph Langner — Mon, 03 Mar 2014 12:41:38 +0000

YouTube hat ja eine sehr leicht bedienbare „Bette dieses Video in andere Webseiten ein“-Funktion. Dazu öffnet man einfach das YouTube-Video, wählt „Teilen“ und „Einbetten“ an, und schon hat man den entsprechenden Iframe-Code, den man nur noch in sein Blog oder eine statische Webseite einbauen muss. Allerdings gibt es dabei ein kleines Problemchen für alle, die mit einer Webseite im „Responsive“-Design arbeiten. Also einer Seite, die sich automatisch der Displaybreite des Endgeräts anpasst — so wie hier auch bei mir im Blog. Wählt man für die YouTube-Videos ein Breite, die perfekt in den Seitenaufbau im PC-Browser passt, dann ergeben sich beim Laden der Seite auf Handys oder Tablets schwarze Balken. Mit ein bisschen CSS-Magie lässt sich dieses Problem jedoch beheben.

Dazu nötig sind ein paar Zeilen wenige CSS-Code, den es gilt in die eigene Webseite einzubauen. Bei WordPress würde das Ganze also in die style.css eures Themes gehören. Unterstützt euer WordPress-Template Child-Themes, dann solltet ihr die Zeilen natürlich in dieses einbauen, so gehen euch die Änderungen bei einem Updates des Templates nicht verloren.

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Habt ihr die Zeilen mit dem CSS-Code in euer Theme integriert, müsst ihr beim Einbetten des von euch gewünschten YouTube-Videos nun nur noch darauf achten, das Video-Container-Block-Element um den Iframe des Videos zu legen. Anschließend passt sich auch das YouTube-Video der Breite des Browsers an.

Da ITler fauler Menschen sind, die wiederkehrende Aufgaben lieber abkürzen, nutze ich für das Einbetten von Videos das WordPress Video Plugin. So lassen sich Online-Videos aus diversen Quellen deutlich leichter per Shortcode in das Blog einbinden. Für mich hat das aber nun auch den Vorteil, dass ich den Video-Container gleich allen bisher in das Blog eingebetteten Videos überstülpen kann. Dazu muss in der /wp-content/plugins/wordpress-video-plugin/videos.php lediglich der YouTube-Code angepasst werden, ich habe mich hier für die simpelste Lösung entschieden und baue das Block-Element einfach in die Iframe-Zeile ein.

// Youtube Code
...
define("YOUTUBE_TARGET", " 
");

Das Ergebnis kann man zum Beispiel unter Mein Weg zu Arch… Teil1: Warum Arch? Warum die GNOME Shell gerne gleich hier im Blog ansehen. Am PC liegen die YouTube-Leisten in der Vorschau deutlich enger am Bild an und besonders auf mobilen Geräten fehlen die hässlichen Ränder jetzt komplett. Die Umstellung tritt besonders auf Handy im Hochkantformat hervor.

PC-Browser

Tablet Hochformat

Tablet Querformat

Handy Hochformat

Linux-Hilfe per IRC und Webchat

Christoph Langner — Thu, 03 Dec 2009 21:30:52 +0000

Gerade wenn man schnell und dringend Hilfe sucht sind IRC-Chats eine gute Möglichkeit Hilfe zu finden. In den einschlägigen IRC-Kanälen sitzen eigentlich immer fleißige Helfer, die bei Problemen direkt ansprechbar sind. Solange man sich an eine Hand voll grundlegender Regeln hält, wird man auch nett behandelt.

Da die gängigsten Linux-Distributionen ihre IRC-Kanäle auf freenode liegen haben und man daher den Webchat-Client von freenode benutzen kann, braucht man im Notfall nicht einmal ein IRC-Programm auf fremden Rechner installieren. Einfach Browser starte, Nicknamen eintragen und den Kanal eingeben. Falls Ihr also einmal „interaktive“ Hilfe sucht, dann schaut im IRC vorbei. Anbei findet ihr Links zu den deutschsprachigen und englischen IRC-Kanälen der beliebtesten Distributionen…