Das iframe HTML-Element

Ein <iframe> ist ein HTML-Element, mit dem du Inhalte von anderen Webseiten direkt in deine eigene Seite einbetten kannst.

Wann benutzt du iframes?

• Videos einbetten (YouTube, Vimeo)
• Google Maps anzeigen
• Externe Webseiten anzeigen
• Widgets einbauen

Beispiel mit YouTube

Du kannst Videos von YouTube einbetten, wenn die Funktion Einbetten wenn du auf Teilen klickst beim Video aktiviert ist. Ist diese Funktion deaktiviert, darf das Video nicht eingebettet werden.

1<iframe width="560" height="315"
2src="https://www.youtube.com/embed/iUtnZpzkbG8?si=kFvm-S7Kf-aXjL-K"
3title="YouTube video player" frameborder="0"
4allow="accelerometer; autoplay; clipboard-write; encrypted-media;
5gyroscope; picture-in-picture; web-share"
6referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Erklärung zum YouTube-Beispiel

• <iframe>: Ermöglicht das Einbetten externer Inhalte in deine Webseite
• width / height: Bestimmen die Breite und Höhe des Inhalts
• src: Gibt die Quelle des eingebetteten Inhalts an, hier ein YouTube-Video
• title: Beschreibt den Inhalt des iframes und verbessert die Barrierefreiheit
• frameborder: Entfernt den Rahmen um das iframe
• allow: Legt fest, welche Funktionen erlaubt sind, zum Beispiel autoplay oder picture-in-picture
• referrerpolicy: Bestimmt, welche Informationen beim Laden an die externe Seite übermittelt werden
• allowfullscreen: Ermöglicht das Abspielen im Vollbildmodus

Für YouTube-Videos solltest du immer den offiziellen Einbettungscode verwenden. Diesen findest du unter „Teilen → Einbetten" direkt auf YouTube.

Beispiel mit Google Maps

Du kannst mit einem iframe auch Karten von Google Maps in deine Webseite einbetten. Das ist praktisch, wenn du einen Standort, einen Laden oder einen Treffpunkt direkt auf deiner Seite anzeigen möchtest.

Den passenden Einbettungscode erhältst du in Google Maps über Teilen → Karte einbetten.

1<iframe
2  src="https://www.google.com/maps/embed?pb=DEIN_EMBED_CODE"
3  width="600"
4  height="450"
5  style="border:0;"
6  allowfullscreen=""
7  loading="lazy"
8  referrerpolicy="no-referrer-when-downgrade">
9</iframe>

Erklärung zum Google-Maps-Beispiel

• src: Enthält die spezielle Google-Maps-Embed-URL
• width / height: Bestimmen die Größe der Karte
• style: Entfernt in diesem Beispiel den Rahmen um die Karte
• allowfullscreen: Ermöglicht die Anzeige im Vollbildmodus
• loading="lazy": Lädt die Karte erst, wenn sie im sichtbaren Bereich erscheint
• referrerpolicy: Steuert, welche Informationen an Google übermittelt werden

Wichtiger Hinweis

Verwende bei YouTube und Google Maps immer den offiziellen Einbettungscode der jeweiligen Plattform. So stellst du sicher, dass die Inhalte korrekt angezeigt werden.