Lesetipp: Ein Zwischenstand zu responsive images

A Q&A on the Picture Element ist ein guter Ausgangspunkt, um sich auf den aktuellen Stand der Entwicklung bei responsives images zu bringen. Zum einen wird ein kurzer Abriss des bisherigen Entwicklungsprozesses gegeben und zum anderen bietet der Artikel genug Links und Schlagworte für eine vertiefende Recherche. Die momentan™ angestrebte Implementierung für responsive images besteht wohl aus einer Verschmelzung von srcset und dem <picture>-Element:

<picture>
    <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
    <source srcset="small.jpg 1x, small-hd.jpg 2x">
    <img src="fallback.jpg" alt="">
</picture>

Mehr dazu kann man auf der Website der Responsive Images Community Group erfahren.

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