CSS für HTML iframe

HTML iframe pur

Das iframe-Tag stammt aus einer Zeit vor den mobilen Geräten, als CSS sich in erster Linie nur um Farben und Schriftbild kümmerte. Von daher ist iframe mit einer Vielzahl von HTML-Attributen ausgestattet. Davon sind heute viele veraltet und andere sind neu hinzugekommen.

Zu den CSS-Arbeiten rund um iframes gehört es z.B., ein iframe-Tag responsive zu machen, aber u.U. auch das Verhindern von Scroll und Drag.

iframe-Elemente zählen zu den Replaced Elements. Wie bei video-, embed- und img-Elementen kann CSS zwar die Position, Breite und Höhe ändern, nicht aber den Inhalt.

Eine Reihe von CSS-Stilen gehört quasi automatisch zum iframe, damit alle Browser denselben Ausgangspunkt benutzen.

iframe {
   margin: 0;
   padding: 0;
   border: none; 
}

Obendrein empfiehlt HTML 5 noch overflow: hidden, damit beim einem Touch oder beim Scrollen kein Scrollbalken entsteht.

Am Ende gibt resize dem Benutzer die Chance, Höhe und Breite des iframe-Elements an seine eigenen Vorlieben anzupassen. Allerdings ist die kleine gestreifte Ecke unten rechts klein und unauffällig, so dass der Benutzer einen Hinweis auf die Skalierbarkeit braucht.

iframe {
	resize: both;
	max-height: 590px;
}

iframe width und height

Ohne die Angabe von width und height als HTML-Attribute rendern die Browser einen iframe mit 304px x 154px. Die Breite ließe sich problemlos über CSS regeln – z.B. mit width:100%, damit das iframe-Element die voll Breite seines Containers einnimmt.

Allerdings erfordern viele iframe-Anwendungen, allen voran Video, ein bestimmtes Seitenverhältnis. Das bringen sie mithilfe von width- und height-Attributen mit, die sich aber ohne Weiteres in CSS ändern lassen.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/qTKat-O7F7g" 
   frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Während sich Bilder mit width:100% und height:auto im korrekten Seitenverhältnis anpassen lassen, funktioniert diese einfache Lösung bei iframes nicht.

iframe und aspect-ratio

Die CSS-Eigenschaft aspect-ratio ist jetzt in allen neuen Browsern angedockt. Wir überlassen CSS das Rechnen.

iframe.aspect {
	width: 300px;
	aspect-ratio: 800/533;
}

iframe-Hack: Wenn IE mitspielen soll

Das Seitenverhältnis (aspect ratio) eines typischen YouTube-Videos ist 560 : 315. Der alte Hack für responsives iframe besteht aus padding-bottom mit dem umgekehrten Seitenverhältnis des iframes für den umfassenden Container.

padding-bottom berechnen mit

315 : 560 = 56.25

<div class="youtube">
   <iframe width="560" height="315" ></iframe></div>
</section>

.youtube {
  position: relative;
  width:100%; 
  height: auto;
  padding-bottom: 56.25%;
}
.youtube iframe {
  position: absolute; 
  width: 100%;
  height: 100%; 
  top: 0; left: 0;
}

Mit dem Abspielen dieses Videos akzeptieren Sie die Datenschutzbestimmungen von YouTube.

Jetzt passt sich das Video responsive an jede Monitorgröße an.

Maps in iframes: pointer-events

Für die Abmessungen von Karten in iframes gilt dasselbe wie für Videos. Allerdings stören Karten durch ihre Bereitschaft zum Scrollen und Vergrößern bei einem Touch. Wenn rechts und links der Map kein Platz für den Finger ist, der die Seite nach unten scrollt oder der Benutzer nicht fit im Umgang mit Webseiten auf Geräten mit Touchscreens ist, kommt der Besucher vielleicht gar nicht bis ans Seitenende, sondern steckt in der Map fest.

Abhilfe schafft eine einfache CSS-Regel:

iframe.map {
   pointer-events: none;
}

pointer-events: none verhindert sämtliche Klick-, Scroll- und Hover-Events auf dem Element. pointer-events: auto kehrt zurück zum Standard-Verhalten.

Beispiel: Open Street Map-Karte

Größere Karte anzeigen