<iframe>

Zuletzt aktualisiert am 3. Juli 2026

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.

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

Beispiele

YouTube-Video einbetten

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.

Inline-HTML mit srcdoc

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>

Sandbox: Sicherheitseinschränkungen

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>

Responsiver iframe mit aspect-ratio

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

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.

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.

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.

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.

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

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.

Email-Kompatibilität

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

Verwandte Elemente