HTML iFrames

Was ist ein iFrame?

Das <iframe> -Element steht für „inline frame“. Es lädt eine andere HTML-Seite in einem kleinen Fenster innerhalb deiner aktuellen Seite. Das kann ein externer Inhalt sein (z. B. YouTube oder eine Karte), oder auch eine lokale Datei auf deinem Server.

HTML Kopieren

<iframe src="seite.html" width="600" height="400">
</iframe>

Der Besucher sieht sozusagen ein „Fenster“ in eine andere Seite – mit eigenem Inhalt, eigenem Scrollverhalten und eigener Adresse.

Typische Einsatzmöglichkeiten

• Videos (z. B. YouTube oder Vimeo)
• Karten (z. B. Google Maps, OpenStreetMap)
• Interaktive Tools oder Formulare
• Inhalte von Partnerseiten (z. B. Widgets, externe Dashboards)

Beispiel: YouTube-Video einbetten

HTML Kopieren

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

Der src -Link wird hier direkt von YouTube bereitgestellt, wenn du ein Video über „Teilen → Einbetten“ auswählst.

Wichtige Attribute

Responsives iFrame-Design

Standardmäßig haben iFrames feste Pixelgrößen. Damit sie auf mobilen Geräten mitwachsen, kannst du sie mit CSS flexibel gestalten:

HTML Kopieren

<div class="video-wrapper">
    <iframe src="https://www.youtube.com/embed/..."
    title="Video" allowfullscreen></iframe>
</div>

CSS Kopieren

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-wrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
}

So bleibt dein eingebettetes Video oder Kartenfenster immer im richtigen Seitenverhältnis - unabhängig von der Bildschirmgröße.

Sicherheit mit sandbox

Da iFrames fremde Inhalte laden, besteht ein Sicherheitsrisiko (z. B. durch bösartige Skripte). Mit dem Attribut sandbox kannst du die Rechte stark einschränken:

HTML Kopieren

<iframe src="seite.html" sandbox></iframe>

Ohne weitere Angaben verbietet sandbox fast alles (Skripte, Formulare, Popups usw.). Du kannst einzelne Rechte gezielt erlauben:

• allow-scripts → JavaScript im iFrame erlauben
• allow-forms → Formularübertragungen erlauben
• allow-popups → Popups aus dem iFrame zulassen
• allow-same-origin → Zugriff auf Cookies/Daten derselben Domain

HTML Kopieren

<iframe src="tool.html" sandbox="allow-scripts allow-forms"></iframe>

Barrierefreiheit bei iFrames

Screenreader erkennen den iFrame-Inhalt nicht automatisch. Deshalb ist ein beschreibendes title -Attribut wichtig, damit Nutzer*innen verstehen, was dort eingebettet ist.

HTML Kopieren

<iframe src="https://karte.de" title="Interaktive Karte unserer Filialen"></iframe>

Außerdem sollte bei wichtigen Informationen ein alternativer Link oder eine Beschreibung außerhalb des iFrames vorhanden sein.

Tipps aus der Praxis

• Nutze loading="lazy" für bessere Performance.
• Wenn möglich, lade keine externen Inhalte ohne DSGVO-Hinweis.
• Bei YouTube-Videos: besser die „nocookie“-Variante verwenden youtube-nocookie.com .
• Vermeide verschachtelte iFrames – sie verlangsamen das Rendering erheblich.

Teste es selbst

Wende das Gelernte direkt an - probiere die Codes aus dem Tutorial aus oder experimentiere mit eigenen Ideen.