YouTube-Videos lassen sich normalerweise nur mit festen Größenangaben einbetten. Das kann auf Webseiten mit Responsive Design zu einer unschönen Darstellung führen. Mit dem folgenden Trick klappt eine Einbindung für YouTube-Videos mit variabler Größe.
Einer der größten Verfechter von Responsive Design ist Google. Komisch also, dass sich ausgerechnet die Videos von Googles YouTube nicht per Responsive Design einbetten lassen, sondern nur mit festen Größenangaben. Die feste Größe kann dazu führen, dass das Design einer responsiven Webseite durcheinander gerät und nicht mehr schön aussieht - etwa dann, wenn das Video über den Rand hinausragt.
Mit einem einfachen Trick, den ich auf der Seite avexdesigns.com gefunden habe, lässt sich dieses Problem umgehen. Man braucht nur ein wenig CSS dazu, um einen speziellen Div-Container zu erstellen, der dann später das Video enthält. Der folgende CSS-Code muss dazu an passender Stelle 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%;
}
An der Stelle, wo später das Video angezeigt werden soll, ist der folgende Beispielcode einzufügen:
<div class="video-container">
<iframe src="http://www.youtube.com/embed/xxxxxxxxx" frameborder="0"
width="560" height="315"></iframe>
</div>
