Flexible Videos im Responsive Webdesign

responsive-videos

Wenn Ihr eine Website mit Media Queries für mobile Endgeräte optimiert und eingebettete Videos von YouTube, Vimeo und Co. verwendet, werdet ihr recht schnell merken, dass es hier ein Problem gibt. Das Layout passt sich zwar flexibel der Breite des Displays bzw. des Monitors an, das Video reagiert auf die CSS-Angaben jedoch nicht und behält seine feste Größe. In der mobilen Version seht ihr dann entweder ein abgeschnittenes Video oder einen in die Breite gedrückten Inhaltsbereich.
Ich möchte euch zwei Lösungen zeigen die dieses Problem beheben.

Beitrag zu Ende lesen

YouTube-Videos valide einbinden

youtube-logo-icon

Wer kennt das Problem nicht. Da hat man einen Blog oder eine Website, will ein YouTube-Video einbinden und das von YouTube bereitgestellte Snippet ist invalide. Nun heißt es googlen und von irgendeinem x-beliebigen Blog den validen Sourcecode kopieren im das Video sauber einzubinden. Ich habe beim stöbern im Netz einen Online-Generator gefunden der all dies für uns erledigt. Inkl. der Option die spätere Ausgabegröße zu bestimmen. Einziger Nachteil: Auch als Profi muss man sich auf eine Seite mit dem demütigenden Titel Tools4Noobs begeben...

Beitrag zu Ende lesen