Iframe im Responsive Webdesign

erstellt am: 21.04.2015 | Kategorien: Webentwicklung | Schlagworte: iframe • Responsive

Iframes wiedersetzen sich der breitenflexiblen Darstellung. Das Problem tritt vor allem bei Youtube Videos auf. Schade, dass Google hier nichts anbietet, vor allem da Google seit heute ja sehr viel Wert auf mobil-taugliche Webseiten legt – bevorzugt im Responsive Design.

Lösungen für CSS gibt es bereits:

Smashingmagazine

Alistapart

Dabei kommen vor allem zwei CSS Klassen zum Einsatz. Eine für den Container und eine für den iFrame selbst:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Dabei muss beim Container das Seitenverhältnis des iFrames ausgerechnet werden und bei padding-bottom eingetragen werden.

Eine etwas flexiblere Lösung – wenn auch mit JavaScript habe ich im folgenden erstellt. Hierbei wird jeder iFrame automatisch gewrappt. Man muss also keine Container um alle iframes im HTML setzen. Außerdem wird padding-bottom aus den Attributen height und width ausgerechnet. Damit sollte also jeder iFrame breitenflexibel einbindbar sein.

 

See the Pen BNazbQ by uli schaeffler (@ulrischa) on CodePen.

Update: Folgender Artikel von t3n beschreibt noch mehr Möglichkeiten

Als erster einen Kommentar schreiben.