Videos responsive darstellen

Das Problem dürfte vielen bekannt vorkommen. Die responsive Website ist fertiggestellt, aber die Videos werden nicht responsive dargestellt. Sie zerstören das mühevolle Design und ragen oft über den rechten Tand hinaus. Kein Wunder, denn eingebettete Videos, wie die von Youtube werden immer mit festen Größenangaben ausgeliefert. Das verwundert um so mehr, da ja Google einer der größten Befürworter responsiver Seiten ist. Immerhin ist es ein klarer Rankingvorteil, wenn sich eine Website geräteunabhängig darstellen lässt. Mit einem kleinen Trick lassen sich aber auch solche Videos perfekt in das responsive Design der eigenen Website einbetten.
Zur korrekten Darstellung der Videos auf responsiven Seiten wird ein wenig CSS benötigt. Zunächst müssen folgende Design Angaben im Stylesheet ergänzt werden:

.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%;
}
Das Video wird dann in einen Container eingebettet, der als Breiten- und Höhenangabe jeweils 100 Prozent zugeordnet bekommt. An der Stelle, an der das Video auf der Seite angezeigt werden soll, wird der folgende Code eingefügt:

<div class="video-container">
<iframe src="http://www.beispielvideo" frameborder="0" width="560" height="315">
</div>

Fertig ist die responsive Website mit eingebetteten Videos.