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.

Responsive Videos mit jQuery-Plugin: FitVids.js

Die erste Lösung die ich euch vorstellen möchte ist das auf jQuery basierende Script FitVids.js von Chris Coyer und Paravel.

Ladet euch das Download-Paket von GitHub herunter und bindet jQuery und FitVids.js in eure Seite ein. Anschließend müsst ihr nur noch den Container des Videos (z.B. .content) manuell angeben. Den Rest erledigt das Script automatisch, indem es jedes Video mit ein paar umschließende CSS-Containern ausstattet.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

• FitVids.js - Website und Demo
• FitVids.js auf GitHub

Das nachfolgende Demo-Video ist mit der Script-Lösung ausgestattet. Wenn ihr testen möchtet wie sich das Video verhält, ändert die Größe eures Browser-Fensters.

Responsive Videos ohne Plugin: Die manuelle CSS-Lösung

Wer kein Script benutzen möchte kann Videos natürlich auch manuell um das notwendige Markup erweitern. Nick La hat vor einiger Zeit einen Artikel zu diesem Thema verfasst den ich hier gerne aufgreifen möchte.

Zunächst einmal müsst ihr alle Videos im HTML-Quellcode mit einem div-Container umschließen.

<div class="responsive-video">
  <!-- hier steht der Embed-Code des Videos -->
</div>

Mit folgendem CSS-Code passt ihr das Video in der Breite immer dem umschließenden Container an. Also üblicherweise dem Content.

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

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

Wenn ihr das Video in der Breite begrenzen möchtet, müsst ihr einen weiteren, umschließenden Container mit fester Breite verwenden.

Ich habe eine simple Demo-Datei erstellt die beide Varianten enthält. Ihr könnt euch die Demo hier anschauen:

Demo anschauen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn Ihr Eure FBML-Tabs in Facebook um ein hübsches YouTube Video bereichern wollt, so reicht folgendes kleine FBML-Snippet.

<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/ID-des-Videos'
imgsrc='http://img.youtube.com/vi/Pfad-zum-Bild.jpg'
width='340' height='270' />

Die Angaben sollten selbsterklärend sein. Anstelle der YouTube-ID kann auch der absolute Pfad eines Videos gesetzt werden. Das Bild ist optional und dient als Start-Screen des Videos.
Wundert Euch nicht: Bei Verwendung eines Bildes muss 2x geklickt werden bis das Video startet.

Um den Code innerhalb von Facebook verwenden zu können müsst Ihr zuvor die Anwendung FBML installieren. Wie das geht steht hier.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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...

Achtung: kopiert nur den Code von object bis /object, sonst fügt Ihr auch noch gratis Werbung ein!

• YouTube-Video Validator

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.