<iframe> (Inline Frame)
Ein <iframe> – kurz für inline frame – ist ein HTML-Element, mit dem eine andere HTML-Seite oder externe Webinhalte in eine bestehende Webseite eingebettet werden können. Der eingebettete Inhalt wird dabei wie ein „Fenster“ innerhalb der Seite dargestellt, ohne direkt Teil des eigentlichen HTML-Dokuments zu sein.
Beispiel
denkstroeme.com kann über ein <iframe> z. B. ein eingebettetes YouTube-Video, ein Google-Maps-Kartenausschnitt oder ein externes Formular anzeigen:
<iframe src="https://www.youtube.com/embed/xyz123" width="560" height="315" allowfullscreen></iframe>
Typische Einsatzbereiche
- Video-Einbettungen (z. B. YouTube, Vimeo)
- Karten & Routen (z. B. Google Maps, OpenStreetMap)
- Externe Formulare oder Widgets (z. B. Typeform, Buchungssysteme)
- Datenschutzkonforme Inhalte per Consent (z. B. Matomo via iFrame)
- Preview-Elemente, wie z. B. eingebettete Webseiten-Demos
Vorteile
- Schnelle Integration externer Inhalte ohne Backend-Anpassung
- Inhalte bleiben technisch und datenschutzrechtlich „ausgelagert“
- Flexibel in Breite/Höhe und Verhalten konfigurierbar
Nachteile & Risiken
- Performance: iFrames können Ladezeit & Core Web Vitals verschlechtern
- Barrierefreiheit: Inhalte im <iframe> sind oft schwer zugänglich für Screenreader
- Datenschutz: Externe Inhalte können Cookies setzen – Einwilligungspflicht!
- SEO: Inhalte im iFrame werden in der Regel nicht vom Google-Crawler gewertet
- Responsivität: iFrames sind nicht automatisch mobiloptimiert
Best Practices
- Responsive Wrapper verwenden (z. B. über CSS mit aspect-ratio oder padding-bottom-Trick)
- Nur mit Consent laden, wenn Tracking-Dienste eingebettet sind
- Titel-Attribut setzen (title="Video: Projektvorstellung Denkströme") für Barrierefreiheit
- Lazy Loading aktivieren (loading="lazy"), um Performance zu verbessern
iFrames sind praktisch, aber sensibel – vor allem im Hinblick auf Datenschutz, Ladegeschwindigkeit und UX. Deshalb sollten sie sparsam und bewusst eingesetzt werden.
