Was ist ein Iframe?

Ein Iframe (Inline-Frame) ist ein Standard-HTML-Element, <iframe>, das ein separates Webdokument innerhalb eines rechteckigen Bereichs der aktuellen Seite lädt. YouTubes Videoplayer wird auf diese Weise ausgeliefert: Die umgebende Seite bleibt deine eigene, während der eingerahmte Bereich YouTubes eigenen Player-Code ausführt.

Warum YouTube ein Iframe verwendet

Weil der Player in seinem eigenen Frame läuft, ist er aus Sicherheitsgründen vom Rest der Seite abgeschottet, erhält automatische Updates von YouTube, ohne dass die einbettende Seite etwas ändern muss, und kann einfach zwischen der Standard-Domain youtube.com und der datenschutzfreundlichen Domain youtube-nocookie.com gewechselt werden, indem nur die Quell-URL geändert wird.

Gängige Iframe-Attribute für Video-Embeds

Die wichtigsten sind src (die Embed-URL mit ihren Parametern), title (für Screenreader), allow (welche Berechtigungen der Frame erhält, etwa Autoplay oder Vollbild), allowfullscreen und loading=”lazy” für die Ladeleistung.

Wie ein Iframe in den Rest einer Webseite passt

Eine Webseite ist normalerweise ein durchgängiges HTML-Dokument, aber ein Iframe schafft eine Grenze: Alles darin ist ein eigenständiges Dokument mit eigenen Skripten, Stilen und Browsing-Kontext, gerendert in einer Box, die mit gewöhnlichem CSS positioniert wird. Diese Isolierung ist ebenso sehr ein Sicherheitsmerkmal wie eine technische Eigenschaft. Eine Seite, die ein YouTube-Iframe einbettet, kann nicht direkt lesen oder verändern, was innerhalb des YouTube-Players passiert, und der Player kann nicht direkt den Rest deiner Seite lesen oder verändern, außer soweit beide Seiten dies über Browser-APIs ausdrücklich erlauben.

Ein praktisches Beispiel

Der Unterschied zwischen einem Iframe und einem einfachen Link zu einer Seite wird sofort sichtbar, wenn man beide nebeneinander vergleicht. Ein Link, <a href="https://youtube.com/watch?v=ID">Auf YouTube ansehen</a>, führt Besucher komplett von deiner Seite weg. Ein Iframe, <iframe src="https://www.youtube-nocookie.com/embed/ID"></iframe>, hält Besucher auf deiner Seite, während YouTubes Player innerhalb eines festgelegten Bereichs angezeigt wird. Das src-Attribut erfüllt in beiden Fällen ganz unterschiedliche Aufgaben: Navigationsziel gegenüber Quelle eines eingebetteten Dokuments.

Iframe versus andere Einbettungstechniken

Iframes sind nicht der einzige Weg, externe Inhalte einzubinden, aber sie sind der Standardansatz für eine voll interaktive Anwendung eines Drittanbieters wie einen Videoplayer. Alternativen wie das Einbetten eines statischen Bildes oder einer Linkvorschaukarte zeigen deutlich weniger: Sie bieten keine Wiedergabesteuerung, können keine Videodaten streamen und reagieren nicht auf Nutzerinteraktion wie ein Iframe-basierter Player. Für alles, was echte Interaktivität von einer anderen Quelle erfordert, Videoplayer, Karten, Zahlungs-Widgets, ist ein Iframe (oder die spezialisierteren APIs darauf aufbauend) meist die einzig praktikable Option. Siehe Embed-Code, wie ein Iframe in den HTML-Code verpackt wird, den man tatsächlich auf eine Seite einfügt.

Häufig gestellte Fragen