Was es ist
Ein iframe ist eine Möglichkeit, den Inhalt einer Webseite in eine andere einzubetten – dadurch lässt sich ein YouTube-Video, eine Google-Karte oder ein Drittanbieter-Widget direkt in die eigene Seite einfügen, ohne diese Funktion selbst zu programmieren. Die meisten Einbettungscodes, die du von diesen Diensten kopierst, kommen bereits mit einer festen Pixelbreite und -höhe, ausgelegt auf einen typischen Desktop-Bildschirm.
Diese Prüfung schaut, ob eingebettete iframes auf einer Seite so eingerichtet sind, dass sie sich mit dem Bildschirm mitverändern („responsiv"), oder ob sie bei ihrer ursprünglichen festen Größe bleiben, unabhängig von der tatsächlichen Bildschirmbreite des Besuchers.
Warum es wichtig ist
Eine Karte oder ein Video, eingebettet in einer festen Größe von zum Beispiel 560×315 Pixeln, funktioniert am Desktop-Bildschirm problemlos, kann aber auf einem Handybildschirm leicht breiter sein als der gesamte Bildschirm – das erzwingt dasselbe seitliche Scrollen oder führt dazu, dass der Inhalt visuell abgeschnitten wird. Das ist ein häufiges, leicht übersehenes Problem, gerade weil der Einbettungscode meist genau so vorgefertigt von der Plattform (YouTube, Google Maps) kommt, ohne offensichtlichen Hinweis darauf, dass er für mobile Nutzung noch angepasst werden müsste.
Ein kaputtes Embed fällt zudem überproportional stärker auf als ein kleines Textproblem – eine halb abgeschnittene Karte oder ein überlaufender Videoplayer ist für jeden Besucher, der auf dem Handy bis zu diesem Bereich der Seite scrollt, sofort visuell offensichtlich.
So behebst du es
- Identifiziere jedes eingebettete iframe auf deiner Website – häufig Videos, Karten oder Drittanbieter-Widgets – und prüfe, wie sie sich auf einem echten Handy darstellen.
- Packe das iframe in einen Container, dessen Breite prozentual gesteuert wird, wobei das iframe selbst auf
width: 100%gesetzt ist, um diesen Container auszufüllen, statt seiner ursprünglichen festen Pixelbreite. - Speziell für YouTube-Embeds ist ein gängiger Ansatz ein Wrapper mit festem Seitenverhältnis (z. B. 16:9), der das Video proportional bei jeder Bildschirmbreite skaliert – für dieses Muster gibt es viele kostenlose Code-Schnipsel.
- Nutzt du einen Website-Baukasten, prüfe, ob es einen eingebauten „Embed"- oder „Video"-Block gibt statt reinem iframe-Code – diese sind meist standardmäßig bereits responsiv.
- Prüfe das Embed anschließend auf dem Handy erneut, um zu bestätigen, dass es sich richtig anpasst, statt überzulaufen.