Definition: Was ist ein iFrame?
Ein iFrame (kurz für inline frame) ist ein HTML-Element, mit dem du Inhalte von einer anderen Website direkt in deine eigene Seite einbinden kannst – zum Beispiel ein YouTube-Video, eine Google Maps-Karte oder ein Kontaktformular. Der iFrame lädt die fremde Seite in einem kleinen „Fenster“ – ganz ohne den Quellcode der anderen Seite direkt zu übernehmen.
Typische Anwendungsbeispiele
- Einbinden von YouTube- oder Vimeo-Videos
- Anzeigen einer Google Maps-Adresse
- Integrieren von Online-Formularen (z. B. Typeform, HubSpot)
- Visualisieren von Dashboards oder Statistiken (z. B. Looker Studio)
Beispiel-Code
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Erklärvideo Webdesign"
loading="lazy"
width="560"
height="315"
sandbox="allow-scripts allow-same-origin"
referrerpolicy="strict-origin"
></iframe>
Erklärung der wichtigsten Attribute
loading="lazy"– Der iFrame wird erst geladen, wenn er sichtbar wird → spart Ladezeit.sandbox="..."– Schränkt die Rechte des eingebetteten Inhalts ein, z. B. kein Zugriff auf Pop-ups oder Cookies.referrerpolicy="strict-origin"– Verhindert, dass Tracking-Parameter (z. B. aus Kampagnen-URLs) an den eingebetteten Dienst übermittelt werden.
Barrierefreiheit bei iFrames
- title-Attribut setzen: Beschreibt den Inhalt des iFrames für Screenreader (z. B. „Lageplan Berlin-Mitte“).
- Alternative bereitstellen: Füge wichtigen Inhalt zusätzlich als Text auf der Seite ein (z. B. Adresse unter einer eingebetteten Karte).
- Nicht zur Navigation verwenden: Screenreader-Nutzer könnten sonst die Orientierung verlieren.
Sicherheits-Tipps
- Clickjacking verhindern: Setze auf deiner Seite den HTTP-Header
X-Frame-Options: SAMEORIGIN, damit sie nicht von anderen per iFrame geladen werden kann. - Third-Party-Cookies prüfen: Viele iFrames laden Tracking-Dienste – beachte die DSGVO! Lösung: Nur per Consent-Banner nach Nutzerfreigabe laden.
FAQ
Kann ich iFrames responsiv machen?
Ja. Nutze ein umgebendes Container-Element mit aspect-ratio oder einen klassischen Padding-Hack mit CSS, um Höhe und Breite flexibel anzupassen.
Sind iFrames noch modern?
Für einfache Inhalte wie Videos oder Karten: ja. Für komplexe Web-Apps: lieber moderne Alternativen wie Web Components oder iframe sandbox.
Wie lade ich iFrames DSGVO-konform?
Nutze einen Consent-Manager: Zeige zuerst einen Platzhalter und lade den iFrame nur nach Einwilligung des Besuchers.
Externe Inhalte sicher und schnell einbinden?
X-06 Designs unterstützt dich bei der DSGVO-konformen, barrierefreien und performanten iFrame-Integration!