Kemmerzell.org


CSS: YouTube-Videos responsiv einbinden

Von Maximilian · 24.08.2014 · Kategorie: CSS

Das Internet und die Technik-Welt verändern sich rasant. Und so sollte jede gute Website mittlerweile auch responsiv sein, sodass diese auf allen Geräten gut aussieht. Denn mittlerweile kann so gut wie jedes Gerät ins Internet gehen und hat eine andere Displaygröße. Und mit einem responsiven Design kann man dann eben als Betreiber einer Internetseite dafür sorgen, dass diese auf jedem Display gut aussieht. Bei normalen HTML-Elementen und Bildern ist dies auch meist kein großes Problem. Probleme gibt es allerdings, wenn man ein YouTube-Video responsiv einbinden will, sodass es sich immer an die Größe des Displays anpasst.

Denn Google wäre theoretisch natürlich in der Lage dies selbst zu machen, aber den Nutzern bietet man diese Möglichkeit nicht an. YouTube-Videos behalten also immer ihre angegebene Größe, wenn man sie im eigenen WordPress-Blog einbindet. Doch mit wenigen Zeilen CSS kann man dieses Problem auch ganz einfach lösen, sodass sich auch die YouTube-Videos an die Größe des Displays anpassen. Dazu benötigt man jedoch eine zusätzliche Klasse und muss das eingebundene YouTube-Video dann immer in einen zusätzlichen div-Container packen. Der CSS-Code könnte dann folgendermaßen aussehen:

Dadurch passt sich das YouTube-Video dann immer an die Größe des Fensters oder des Displays an. Und das funktioniert natürlich nicht nur mit YouTube-Videos, sondern auch mit anderen Videos, die mit einem iframe eingebunden werden. Der Code zum Einbinden eines Videos könnte dann so aussehen:

Der zusätzliche div-Container muss dabei leider immer manuell angegeben werden. Ansonsten funktioniert die automatische Anpassung der Größe leider nicht. Grundsätzlich ist dies jedoch ein einfacher und praktischer Weg, um YouTube-Videos responsiv einzubinden, sodass die eigene Website mit dem eingebundenen Video auf jedem Gerät gut aussieht.

Kommentieren Teilen +1 Twittern
Dieser Artikel wurde von +Maximilian verfasst.
Kommentare
Einen eigenen Kommentar hinterlassen




Newsletter

Um unseren Newsletter zu abonnieren, tragen Sie bitte einfach Ihre Email-Adresse unten ein. Sie werden daraufhin eine Bestätigungsmail erhalten!

Jetzt den RSS-Feed abonnieren!

Klicke hier und abonniere den RSS-Feed, um immer auf dem neusten Stand zu bleiben.

Tipp senden

Du hast etwas entdeckt, über das wir noch nicht berichtet haben? Dann schicke uns doch einen Hinweis zu!

Klicke einfach auf den unteren Button, fülle das Formular aus und wenn das Thema passt, erscheint bei uns schon bald ein Artikel zu deiner Entdeckung.

Jetzt Tipp senden!