Responsive iframe- und video-Elemente

Beim Einbetten von Videos innerhalb von iframe– oder video-Elementen in responsiven Websites gibt es in der Regel Probleme bei einer Größenveränderung ihres Containerelements. Obwohl die Breite des iframe’s mittels der Css-Eigenschaft max-width auf 100% gesetzt werden kann, ist davon nicht dessen Höhe betroffen.

Um dieses Problem zu beheben, gibt es einen einfachen Trick: Um das betreffende iframe oder video wird ein Wrapper-Element eingefügt.

<div class="video-wrapper">
	<iframe width="560" height="315" src="http://www.youtube.com/embed/T0ezIRTeIUY" frameborder="0" allowfullscreen></iframe>
</div>

Das allein reicht natürlich noch nicht aus. Um das gewünschte Verhalten zu erreichen, wird noch ein wenig Css benötigt.

.video-wrapper {
	position: relative;
	/* padding-top je nach Video-Format */
	padding-top: 56.25%; /* entspricht 16:9 */
}

	.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

Erklärung

Es wird eine Box erstellt, die je nach padding-top ein bestimmtes Format besitzt. In dieser Box wird das iframe– oder video-Element positioniert. Durch die width– und height-Eigenschaften füllt es das Elternelement aus und passt sich dessen Größenveränderungen an.

Links

Creating Intrinsic Ratios for Video
FitVid.js