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.
Kommentar verfassen