<iframe>

Das <iframe>-Element (Inline Frame) bettet eine externe Webseite oder ein eigenständiges HTML-Dokument in die aktuelle Seite ein. Jeder iframe erstellt einen komplett eigenen Browsing-Kontext: mit eigenem DOM, eigenem CSS, eigenem JavaScript. Das macht iframes mächtig, aber auch komplex: Jeder iframe ist wie ein Mini-Browser im Browser.

Steckbrief <iframe>

Kategorie: Links & Medien
Art: Block
Attribute: 10
Beispiele: 4
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.07.2026

Grundlagen

Ein iframe lädt ein vollständiges HTML-Dokument in einem rechteckigen Bereich deiner Seite. Der eingebettete Inhalt ist vollständig isoliert: CSS der Elternseite wirkt nicht im iframe und umgekehrt. Diese Isolation macht iframes zur Standardlösung für das Einbetten von Drittanbieter-Inhalten wie YouTube-Videos, Google Maps oder Social-Media-Widgets.

Jeder iframe erstellt einen eigenen Browsing-Kontext mit eigenem window- und document-Objekt
CSS der Hauptseite wirkt nicht im iframe, und umgekehrt
JavaScript-Kommunikation zwischen Seite und iframe ist nur über postMessage() möglich (bei Cross-Origin)
Das sandbox-Attribut schränkt ein, was der iframe-Inhalt darf (Scripts, Formulare, Popups, etc.)
Jeder iframe bedeutet zusätzliche Performance-Kosten: Ein neuer Rendering-Kontext, ein neuer Netzwerk-Request, eigenes CSS- und JS-Parsing
loading="lazy" sorgt dafür, dass der iframe erst geladen wird, wenn er in den sichtbaren Bereich scrollt
Das allow-Attribut steuert Feature Policies wie Kamera, Mikrofon oder Autoplay

Syntax

<iframe src="seite.html"
        width="600"
        height="400"
        title="Beschreibung des Inhalts">
</iframe>

Attribute

10 Attribute

Attribut und Beispiel	Beschreibung
`src` URL src="https://example.com"	URL des einzubettenden Dokuments. Kann eine externe URL oder ein lokaler Pfad sein.
`srcdoc` String srcdoc="<p>Hallo</p>"	Inline-HTML, das direkt im iframe gerendert wird. Hat Vorrang vor src, wenn beides gesetzt ist.
`width` Number width="600"	Breite des iframes in Pixeln. Akzeptiert nur ganzzahlige Werte ohne Einheit. Für prozentuale oder andere Werte CSS verwenden.
`height` Number height="400"	Höhe des iframes in Pixeln. Akzeptiert nur ganzzahlige Werte ohne Einheit. Für prozentuale oder andere Werte CSS verwenden.
`sandbox` String sandbox="allow-scripts allow-same-origin"	Aktiviert Sicherheitseinschränkungen. Ohne Wert: alles gesperrt. Mit Werten (Leerzeichen-getrennt): allow-scripts, allow-same-origin, allow-forms, allow-popups, allow-modals, etc.
`allow` String allow="autoplay; fullscreen"	Feature Policy: Steuert, welche Browser-APIs der iframe verwenden darf (Kamera, Mikrofon, Autoplay, Fullscreen, etc.).
`loading` String loading="lazy"	Ladeverhalten: eager (sofort, Standard) oder lazy (erst wenn sichtbar). Lazy Loading spart Bandbreite bei iframes unterhalb des sichtbaren Bereichs.
`name` String name="content-frame"	Name des Browsing-Kontexts. Kann als Ziel für Links (target) oder Formular-Submissions verwendet werden.
`referrerpolicy` String referrerpolicy="no-referrer"	Steuert, welche Referrer-Informationen beim Laden des iframes gesendet werden: no-referrer, origin, strict-origin-when-cross-origin, etc.
`title` String title="YouTube Video Player"	Beschreibung des iframe-Inhalts für Screenreader. Kein HTML-spezifisches Attribut, aber für Barrierefreiheit unerlässlich.

Beispiele

4 Beispiele

Der häufigste Anwendungsfall für iframes: Videos von YouTube oder Vimeo einbetten. Die Plattformen stellen einen Embed-Code bereit, den du direkt verwenden kannst.

<iframe
  width="560"
  height="315"
  src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
  title="YouTube Video Player"
  allow="accelerometer; autoplay; clipboard-write;
         encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy">
</iframe>

Tipp: Verwende youtube-nocookie.com statt youtube.com. Das ist die datenschutzfreundliche Variante, die keine Tracking-Cookies setzt, bis der Nutzer das Video tatsächlich abspielt.

Mit srcdoc kannst du HTML direkt im iframe rendern, ohne eine externe Datei zu laden. Das ist nützlich für Live-Previews, Code-Demos oder sandboxed Content.

<iframe
  srcdoc="
    <style>
      body {
        font-family: sans-serif;
        padding: 20px;
        background: linear-gradient(135deg,
          #667eea, #764ba2);
        color: white;
      }
    </style>
    <h1>Live-Preview</h1>
    <p>Dieses HTML wird direkt im iframe
      gerendert.</p>
  "
  width="100%"
  height="120">
</iframe>

Das sandbox-Attribut ist der Sicherheitsmechanismus für iframes. Ohne Wert wird alles gesperrt: Scripts, Formulare, Popups, Navigation. Du schaltest gezielt nur das frei, was du brauchst.

<!-- Alles gesperrt: kein JS, keine Formulare -->
<iframe src="drittanbieter.html"
        sandbox="">
</iframe>

<!-- Scripts und Same-Origin erlaubt -->
<iframe src="widget.html"
        sandbox="allow-scripts
                 allow-same-origin">
</iframe>

<!-- Scripts, Formulare und Popups erlaubt -->
<iframe src="app.html"
        sandbox="allow-scripts
                 allow-forms
                 allow-popups">
</iframe>

iframes haben feste Pixel-Abmessungen, was auf verschiedenen Bildschirmgrößen problematisch ist. Mit CSS aspect-ratio und width: 100% wird der iframe responsiv.

<style>
  .responsive-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
  }
</style>

<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  class="responsive-iframe"
  title="Video"
  loading="lazy"
  allow="autoplay; fullscreen">
</iframe>

Sicherheit

iframes laden externen Code auf deiner Seite, das birgt Risiken. Hier die wichtigsten Schutzmaßnahmen:

sandbox-Attribut: Schränkt die Fähigkeiten des iframe-Inhalts ein. Ohne Wert ist alles gesperrt. Schalte nur frei, was der Inhalt tatsächlich braucht. allow-scripts allow-same-origin zusammen ermöglicht dem iframe-Inhalt allerdings, die Sandbox selbst zu entfernen. Verwende diese Kombination nur bei vertrauenswürdigen Quellen.

allow-Attribut: Steuert Browser-APIs wie Kamera, Mikrofon, Geolocation. Gib nur die Permissions frei, die der eingebettete Inhalt braucht.

referrerpolicy-Attribut: Kontrolliert, welche Informationen über deine Seite an den iframe-Inhalt gesendet werden. no-referrer ist die restriktivste Option.

Content Security Policy (CSP): Über den frame-src-Header kannst du serverseitig festlegen, welche Domains in iframes geladen werden dürfen.

DSGVO-Hinweis: Drittanbieter-iframes (YouTube, Google Maps, Social Media Widgets) laden Ressourcen von externen Servern und setzen häufig Cookies. Nach DSGVO brauchst du dafür die Einwilligung der Nutzer. Eine gängige Lösung ist ein Platzhalter-Bild mit Hinweistext, das erst nach Zustimmung durch den eigentlichen iframe ersetzt wird.

Barrierefreiheit

Das title-Attribut auf dem <iframe> ist für die Barrierefreiheit unverzichtbar. Screenreader verwenden diesen Text, um den iframe-Inhalt zu beschreiben, bevor der Nutzer hineinavigiert. Ohne title kündigt der Screenreader nur “Frame” an, der Nutzer muss dann raten, was sich dahinter verbirgt.

Formuliere den title so, dass er den Inhalt und Zweck beschreibt:

Gut: title="YouTube Video: HTML-Grundlagen Tutorial"
Schlecht: title="iframe" oder title="Video"

Wenn der iframe rein dekorativen Inhalt hat oder für Screenreader irrelevant ist, kannst du aria-hidden="true" setzen. Rein dekorative iframes sind aber selten. Überleg in dem Fall, ob du den iframe überhaupt brauchst.

Häufige Fehler

5 Fehler

01 title-Attribut vergessen

Ohne title ist der iframe für Screenreader-Nutzer nicht identifizierbar. Es kostet dich fünf Sekunden, spart aber vielen Nutzern Frustration.

02 sandbox nicht verwenden bei Drittanbieter-Inhalten

Wenn du Inhalte von externen Quellen einbettest, solltest du immer sandbox mit den minimal nötigen Permissions setzen. Ohne Sandbox hat der iframe-Inhalt vollen Zugriff auf Browser-APIs.

03 iframe für Inhalte verwenden, die dazugehören

Wenn der Inhalt Teil deiner eigenen Seite ist, brauchst du keinen iframe. Iframes sind für externe oder isolierte Inhalte gedacht. Für seiteneigene Inhalte gibt es bessere Lösungen: Komponenten, Web Components oder Server-Side Includes.

04 Feste Pixel-Abmessungen ohne responsive Lösung

Ein iframe mit width="600" height="400" überläuft auf Mobilgeräten. Verwende CSS aspect-ratio mit width: 100% oder einen Container mit overflow: hidden für responsives Verhalten.

05 allow-scripts allow-same-origin leichtfertig setzen

Diese Kombination in sandbox erlaubt es dem iframe-Inhalt, die Sandbox-Einschränkungen selbst zu entfernen. Verwende sie nur bei Inhalten, denen du vollständig vertraust.

Browser-Kompatibilität

5 von 5

Das iframe-Element wird seit den Anfängen des Webs von allen Browsern unterstützt. Auch die Attribute sandbox, allow und loading werden von allen modernen Browsern unterstützt.

Chrome

Komplett

Vollständige Unterstützung aller Attribute inkl. sandbox, allow und loading="lazy".
Firefox

Komplett

Vollständige Unterstützung aller Attribute inkl. sandbox, allow und loading="lazy".
Safari

Komplett

Vollständige Unterstützung aller Attribute inkl. sandbox, allow und loading="lazy".
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

iframes werden von den meisten Email-Clients aus Sicherheitsgründen komplett entfernt. Verwende in E-Mails stattdessen verlinkte Bilder oder Thumbnail-Previews.

Apple Mail

Teilweise

Apple Mail kann iframes grundsätzlich anzeigen, aber das Verhalten ist inkonsistent. Besser auf Links mit Vorschaubildern setzen.
Gmail

Keine

Gmail entfernt iframes komplett. Verwende ein verlinktes Vorschaubild statt eines eingebetteten Videos.
Outlook

Keine

Outlook entfernt iframes. Für Videos ein Thumbnail mit Play-Button verwenden, das auf die Video-URL verlinkt.
Thunderbird

Teilweise

Kann iframes anzeigen, blockiert aber standardmäßig Remote-Inhalte. Nutzer müssen das Laden explizit erlauben.
Yahoo Mail

Keine

Yahoo Mail entfernt iframes aus Sicherheitsgründen komplett.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da