CSS für HTML iframe

HTML iframe pur

HTML iframe 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.

Zum Styling gehört es z.B., ein iframe-Element responsive zu machen, aber u.U. auch das Verhindern von Scroll und Drag.

iframe-Elemente zählen zu den Replaced Elements: Elemente, deren Inhalt nicht durch HTML direkt bestimmt, sondern durch eine externe Ressource ersetzt wird. 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; 
}

Für einen exakt in der Höhe angepassten iframe empfiehlt HTML 5 noch overflow: hidden, damit beim einem Touch oder beim Scrollen kein Scrollbalken entsteht.

Wenn das iframe-Element hingegen »überläuft« und nur einen Ausschnitt zeigt, sind Scrollbalken wichtig für den Benutzer, denn sie deuten die Gesamthöhe des iframe an.

Am Ende gibt CSS 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 bereitwillig im korrekten Seitenverhältnis anpassen lassen, funktioniert diese einfache Lösung bei iframe, video und embed nicht.

iframe und aspect-ratio

CSS aspect-ratio ist in allen Browsern angedockt. Wir überlassen CSS das Rechnen.

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

Frühere Internet Explorer-Versionen benötigten spezielle Anpassungen für Frames. Heute sind diese Browser praktisch nicht mehr relevant, und moderne Browser unterstützen aspect-ratio konsistent. Dennoch bleibt das Anpassen der Höhe eines iframe-Elements ein Würfelspiel. Probleme bereiten z.B. img-Elemente, die responsiv mit srcset und sizes eingesetzt werden.

Maps in iframes: CSS 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