Iframes

Fenster in andere Welten

Iframes sind wie kleine magische Portale, die dir Einblicke in fremde Welten gewähren, ohne dass du dabei deine gemütliche Webseite verlassen musst. Ob es nun Videos, Karten oder Dokumente sind, einfach einfügen und schon hast du ein Fenster zu einer völlig anderen Dimension, die sich nahtlos in dein Design einfügt. So können deine Besucher fremde Orte erkunden, ohne auch nur einen Klick zu viel zu machen.

Aber wie bei jedem Zauberspruch kommt mit großer Macht große Verantwortung. Iframes sind wundervoll, aber sie können auch die Ladezeiten deines Reiches bremsen und Sicherheitslücken öffnen, wenn sie nicht richtig eingesetzt werden. Nutze sie weise, und deine Seite wird eine Schatzkammer interaktiver Erlebnisse sein!

Los geht’s

Externe Inhalte einbinden
YouTube-Videos einbinden

iFrames & YouTube im HTML

Externe Inhalte einbetten – Videos, Karten und mehr direkt auf deiner Seite!

Externe Inhalte einbinden

Stilvolle Multimedia-Elemente für deine Webseite

Um ein Iframe in HTML einzubinden, verwendest du das <iframe>-Element. Damit kannst du Inhalte wie Webseiten, Videos oder Karten aus anderen Quellen in deine eigene Webseite einbetten.

<iframe src="https://www.example.com" width="600" height="400" style="border:1px solid #000;"></iframe>

Dieses Code-Snippet fügt ein Iframe mit einer externen Webseite (https://www.example.com) in deine Seite ein.

YouTube-Videos einbinden

Struktur und Ordnung auf einen Blick

Um ein YouTube-Video auf einer Website einzubinden, kannst du die erweiterte Datenschutzfunktion nutzen, die YouTube anbietet. So werden erst Daten an YouTube übertragen, wenn das Video abgespielt wird. Hier ist eine kurze Anleitung um die Video-URL mit erweitertem Datenschutz zu kopieren:

Gehe auf die YouTube-Seite des Videos, das du einbetten möchtest.
Klicke auf „Teilen“ und dann auf „Einbetten“.
Im Einbettungscode findest du ein Kontrollkästchen „Erweiterten Datenschutzmodus aktivieren“. Der Link im Code ändert sich nun von „youtube.com“ auf „youtube-nocookie.com“
Kopiere den Einbettungscode. Füge diesen Code dann in den HTML-Bereich deiner Website ein.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/WhWc3b3KhnY?si=cZUHTUmnwUh5qVoG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Hier bettest du einen der schönsten Blender-Kurzfilme ein: Spring.

In dieser Lektion hast du gelernt…

Wie du mit <iframe> externe Inhalte wie Webseiten, Karten oder Dokumente einbindest, um interaktive Erlebnisse auf deiner Seite zu schaffen.
Warum <iframe> ein Fenster zu anderen Welten ist, aber mit Bedacht genutzt werden sollte, um Ladezeiten und Sicherheitsrisiken zu minimieren.
Welche Attribute ein <iframe>-Element benötigt, z. B. width, height und frameborder, um das eingebettete Fenster ansprechend zu gestalten.
Wie du den Datenschutz-Modus von YouTube aktivierst, um Tracking erst beim Abspielen eines Videos zu ermöglichen.

Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!

weiter geht’s