[html5.wirlernen.at] [Aufgaben zur Lektion] [Video zur Lektion]

Lektion 17: Ein Youtube - Video mit einem Iframe einbinden

Hier lernst du wie man in einer Webseite ein Youtube Video einbinden kann...

Man begibt sich dazu zu Youtube und wählt ein Video der eigenen Wahl - achte darauf dass du auch die RECHTE hast dieses Video in deine Webseite einzubinden!
Hier unten siehst du wie du das machen kannst!

Lore Ipsum beim Editor Visual Studio Code einfügen

Dann fügt man den kopierten Code in das HTML - Grundgerüst ein - du siehst wie das geht hier unten:

Dadurch kann das Video in die Webseite eingebunden werden:

Der HTML - Code von YouTube beinhaltet einen sogenannten iframe - tag.
Mit Hilfe eines iframe kann man eine ANDERE Webseite (incl. z.B. Texten, Fotos, Videos) in die EIGENE einbinden - es wird für diese fremde Seite ein eigenes Fenster freigehalten - in dieses Fenster wird dann die fremde Webseite hineingeladen...
Ein iframe hat üblicherweise die folgenden Eigenschaften - width steht für die Breite und height für die Höhe des Fensters. Die Angaben stehen für Bildpunkte (Pixel) - man schreibt aber NICHT mehr wie in früheren HTML Versionen px als Einheit dazu.
Hier unten siehst du den korrekten Code!
Der fertige Code:

<!DOCTYPE html>
<html lang="de">

<head>
    <title>Titel</title>
    <meta charset="UTF-8">
</head>

<body>

<iframe width="560" height="315" src="https://www.youtube.com/embed/P3YtNMLvI2U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>

[Beispiel zur Lektion]

Klicke hier oben auf "Beispiel" - es wird mit Hilfe des iframe - tags ein Video aus Youtube eingebunden. Den fertigen Code bekommst du direkt von Youtube bereit gestellt.

⇑ Augabenstellung:
1. Erkläre mit eigen Worten (also nicht irgendwo abschreiben :-)) was man unter einem Iframe versteht! Zur Beantwortung der Frage kannst du natürlich auch im Internet recherchieren!
2. Erzeuge in einem Editor ein HTML5 - Grundgerüst! Binde and der richtigen Stelle des Grundgerüsts ein Video deiner Wahl meines YouTube - Kanals (https://www.youtube.com/markusoppitz ) ein! Speichere diese Datei als 017.html. Wähle für diese Webseite mit dem entsprechenden Tag einen aussagekräftigen Titel!