Modul 6
Ein YouTube Video einbetten
Ein eingebettetes Video wird innerhalb deiner Webseite angezeigt. Die Videodatei bleibt dabei auf YouTube. Du lädst sie nicht in deinen Projektordner herunter. Zum Abspielen braucht der Computer Internet.
Ein Link öffnet eine Seite, ein iframe zeigt sie hier
Ein normaler Videolink führt den Besucher zu YouTube. Ein eingebetteter Player bleibt auf deiner Hobbyseite sichtbar. Dafür verwendest du iframe. Du lädst keine Videodatei herunter. Deine Webseite zeigt nur ein Fenster zum Video auf YouTube.
Die Adresse hinter src muss eine Einbettungsadresse sein. In unserem Beispiel erkennst du sie am Abschnitt /embed/. Die Zeichen dahinter sind die Video-ID. Kopiere den Einbettungscode über Teilen und Einbetten. Eine normale Adresse mit watch?v= funktioniert an dieser Stelle nicht unverändert.
Das Video braucht auch deinen eigenen Text
Schreibe vor den Player eine passende Überschrift. Erkläre darunter in mehreren Sätzen, was man sieht und warum du dieses Video ausgewählt hast. Nenne auch den Videotitel und den Kanal. Ein Besucher soll verstehen, was das Video mit deinem Hobby zu tun hat.
Teste die Wiedergabe über den Webzugang deiner Lehrkraft. Bei einer direkt geöffneten Datei kann YouTube den Player sperren, obwohl dein HTML richtig ist. Manche Videos dürfen außerdem nicht eingebettet werden. Ergänze deshalb auch einen normalen Link zum Video.
Ein iframe zeigt einen Inhalt von einer anderen Webseite in einem Rahmen. src enthält die Einbettungsadresse. Bei YouTube steht darin /embed/ und die Video-ID. Ein normaler Link mit watch?v= gehört nicht unverändert in das src eines iframe. title beschreibt den Inhalt des Rahmens.
Die Bausteine
| Schreibweise | Bedeutung |
|---|---|
| <iframe> … </iframe> | Ein eingebetteter fremder Inhalt. |
| src="https://www.youtube-nocookie.com/embed/…" | YouTube-Einbettungsadresse im erweiterten Datenschutzmodus. |
| title="Video über mein Hobby" | Beschreibung des eingebetteten Inhalts. |
| width und height | Breite und Höhe des Rahmens. |
| allowfullscreen | Erlaubt die Vollbildansicht. |
Beispiel im body
<h2>Ein Roboter in Bewegung</h2>
<iframe width="560" height="315"
src="https://www.youtube-nocookie.com/embed/29ECwExc-_M"
title="All New Atlas von Boston Dynamics"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
<p>Video: Boston Dynamics, All New Atlas.</p>So holst du ein anderes Video: Öffne es auf YouTube am Computer. Wähle Teilen → Einbetten → Kopieren. Füge den Code in deinen body ein. Wähle, falls angeboten, den erweiterten Datenschutzmodus. Ergänze einen passenden title. Ein normaler YouTube-Link unter dem Video ist eine gute zusätzliche Möglichkeit zum Öffnen.
Das Beispielvideo
All New Atlas · Boston Dynamics. Erst beim Laden wird eine Verbindung zu YouTube hergestellt.
Alternativ direkt auf YouTube ansehen. Bei lokalen HTML-Dateien kann die Einbettung blockiert sein. Deine Lehrkraft zeigt dir dann den passenden Webzugang.
Deine Aufgabe
Arbeite in deinem Ordner mein-hobby weiter. Bearbeite die Schritte der Reihe nach. Verwende dein eigenes Hobby und formuliere eigene Sätze. Speichere nach jedem größeren Arbeitsschritt und sieh dir das Ergebnis im Browser an.
- Wähle gemeinsam mit der Lehrkraft ein passendes Video oder verwende das Kursbeispiel. Überlege vor dem Einfügen, welchen Teil deines Hobbys es erklärt.
- Schreibe eine passende h2 und einen kurzen Einleitungstext mit zwei Sätzen. Erkläre darin, worauf die Besucher beim Ansehen achten sollen.
- Hole den Einbettungscode über Teilen und Einbetten oder tippe das Beispiel ab. Füge den iframe im body unter dem Einleitungstext ein. Ergänze einen passenden title.
- Schreibe unter dem Player einen Absatz aus drei bis vier eigenen Sätzen. Beschreibe den Inhalt und begründe deine Auswahl. Nenne außerdem den Kanal und den Videotitel.
- Ergänze einen normalen Link zum Video mit einem verständlichen Linktext. Der Besucher soll das Video bei Bedarf direkt auf YouTube öffnen können.
- Speichere und teste die Seite über den Webzugang der Lehrkraft. Wenn die Wiedergabe blockiert ist, kläre zuerst, ob die Einbettung erlaubt ist. Deine Erklärung und der Videolink sollen auch dann lesbar bleiben.
Ein eingebettetes Video mit Einleitung, eigener Beschreibung, Quellenangabe und zusätzlichem Videolink.
Zum Abschluss
Kreuzworträtsel
Sechs Begriffe aus diesem Modul. Ein Kästchen steht für einen Buchstaben. Schreibe groß, ohne Leerzeichen: Ä = AE, Ö = OE, Ü = UE, ß = SS. Fülle das Rätsel auf deinem Handout aus.
Waagrecht →
- 1. Diesen Wert legt width am iframe fest. (6 Buchstaben)
- 6. Diese Verbindung brauchst du zur Wiedergabe. (8 Buchstaben)
Senkrecht ↓
- 2. HTML-Element für den eingebetteten Player. (6 Buchstaben)
- 3. So heißt der Menüpunkt nach Teilen bei YouTube. (9 Buchstaben)
- 4. Diesen Urheberbereich nennst du unter dem Video. (5 Buchstaben)
- 5. Bewegte Bilder, die du von YouTube einbettest. (5 Buchstaben)
Drei Abschlussfragen
- Wie unterscheidet sich ein Videolink von einem eingebetteten Player?
- Welche Informationen schreibst du unter das Video?
- Was machst du, wenn das Video beim Öffnen der lokalen Datei blockiert ist?
Online-Quiz
Zehn Fragen, jeweils eine richtige Antwort. Klicke dich durch und erhalte am Ende deine Punkte mit kurzen Erklärungen. Keine Anmeldung nötig.
Online-Quiz starten · Modul 6