Flexible Videos über HTML5

Neben Bildern werden auch häufig Videos eingebunden. Das Erstellen von flexiblen Videos für Responsive Webdesign funktioniert wie bei den flexiblen Bildern über die CSS-Eigenschaft max-width:100%, solange das Video über HTML5 eingebunden wird:

embed,
object,
video {
max-width: 100%;
height:auto;
}

Flexible Videos über iFrames

Besonders häufig werden Videos mit einem iFrame über einen Drittanbieter wie YouTube, Vimeo und Co eingebunden. Bei einem iFrame funktioniert der Trick mit der CSS-Eigenschaft max-width:100% für ein Responsive Webdesign leider nicht mehr. Das macht das Einbinden eines Videos für ein Responsive Webdesign etwas komplizierter.

Das Problem kann auch zwei Arten gelöst werden. Es gibt zum einen die manuelle CSS-Lösung und zum anderen die Lösung mit einem jQuery-Plugin.

 

Flexible Videos mit manuellem CSS

Für ein eingebettetes Video eines Drittanbieters müssen Sie zunächst einmal allen Videos mit einem iFrame in einem zusätzlichen Div-Container einschließen. Der HTML-Quellcode könnte wie folgt aussehen:

Hier haben wir als Div-Container die CSS-Klasse video-container genommen.

Nun brauchen wir noch die CSS-Eigenschaften für die CSS-Klasse, die wie folgt aussehen kann:

.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%;
}

Durch diese CSS-Eigenschaften wird das Video für das Responsive Webdesign gleichmäßig skaliert.

 

Flexible Videos mit mit jQuery-Plugin FitVids.js

Eine schönere Lösung für ein flexibles Video in einem Responsive Webdesign ist, wenn man sich mit einem jQuery-Plugin helfen lässt.

Das jQuery-Plugin FitVids.js können Sie über die Website http://fitvidsjs.com/ runterladen. Das Plugin erlaubt Ihnen flüssige Videos auf Ihrer Website einzubetten.

 

Nachdem Sie auf Download geklickt haben, kommen Sie auf die https://github.com/davatron5000/FitVids.js. Dort laden Sie die Datei jquery.fitvids.js runter. Auf dieser Seite wird auch beschrieben wie Sie das Plugin benutzen können.

Das Plugin ist ein jQuery-Plugin, d. h. es basiert auf jQuery. Deswegen müssen Sie zuerst jQuery einbinden. Danach müssen Sie das Plugin FitVids.js einbinden. Als Letztes müssen Sie angeben an was sich das iFrame orientieren soll, z. B. an der Klasse videocontainer. Der Code würde dann folgendermaßen aussehen:

<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.
$(".videocontainer").fitVids();
});
</script>

Das Video passt sich nun an die Verhältnisse der Website an. Das Pluging FitVids.js funktioniert für die gängigen Videoanbieter wie YouTube, Vimeo, Blip.tv, Viddler und Kickstarter.

 

Haben Sie Fragen oder Probleme bei flexiblen Videos für Responsive Webdesign? Gerne helfen wir Ihnen weiter. Kontaktieren Sie uns einfach.