YouTube-Videos in HTML einbetten

Einführung

Das HTML <embed>-Tag kann verwendet werden, um verschiedene Arten von Inhalten wie Bilder, Videos und andere Webseiten in unsere Webseite einzubinden. In diesem Lab verwenden wir das HTML <embed>-Tag, um ein YouTube-Video einer Webseite hinzuzufügen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/head_elems -.-> lab-70752{{"HTML Externe Inhalte/Plugin"}} html/charset -.-> lab-70752{{"HTML Externe Inhalte/Plugin"}} html/lang_decl -.-> lab-70752{{"HTML Externe Inhalte/Plugin"}} html/multimedia -.-> lab-70752{{"HTML Externe Inhalte/Plugin"}} html/embed_media -.-> lab-70752{{"HTML Externe Inhalte/Plugin"}} html/inter_elems -.-> lab-70752{{"HTML Externe Inhalte/Plugin"}} end

HTML-Dokumentstruktur

Erstellen Sie eine neue Datei mit dem Namen index.html.

Sobald Sie Ihre index.html-Datei erstellt haben, fügen Sie die grundlegende Struktur für ein HTML-Dokument mit einem head- und einem body-Element hinzu.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Embed Tag Lab</title>
  </head>
  <body></body>
</html>

Fügen Sie ein Video mit dem HTML `<embed>`-Tag hinzu

Um ein Video zu Ihrer Webseite hinzuzufügen, müssen Sie den YouTube-Einbettungscode verwenden.

Navigieren Sie zu einem beliebigen Video auf YouTube.
Klicken Sie unter dem Video auf die Schaltfläche „Teilen“ und anschließend auf die Schaltfläche „Einbetten“. Dies öffnet das Fenster „Video einbetten“.
Kopieren Sie den HTML-Code, der im Fenster „Video einbetten“ erscheint.
Fügen Sie den Code in Ihre index.html-Datei innerhalb des <body>-Elements ein.
```
<embed src="https://www.youtube.com/embed/TWfph3iNC-k" />
```

Legen Sie die Breite und Höhe des Videos fest

Um Probleme bei der Größenangabe zu vermeiden, ist es wichtig, die Breite und Höhe des Videos festzulegen.

Fügen Sie die Attribute height und width zu Ihrem <embed>-Tag hinzu. Das Attribut width definiert die Breite des Videos, und das Attribut height setzt seine Höhe.
```
<embed
  src="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
/>
```

Speichern Sie die index.html-Datei und öffnen Sie sie in Ihrem Webbrowser, um zu überprüfen, ob das Video erfolgreich hinzugefügt wurde.

Fügen Sie einen Fallback für nicht unterstützte Browser hinzu

Nicht alle Browser unterstützen das <embed>-Tag. Um sicherzustellen, dass Ihre Webseite auch für Benutzer mit nicht unterstützten Browsern weiterhin funktionsfähig ist, können Sie eine Fallback-Option hinzufügen.

Fügen Sie das <object>-Tag hinzu, wobei Sie Parameter angeben, die den Typ des eingebetteten Inhalts und die URL der zu embedden Ressource angeben.

<object
  type="text/html"
  data="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
>
  <p>
    Ihr Browser unterstützt das HTML5-Video-Element nicht. Bitte
    aktualisieren Sie auf einen modernen Browser.
  </p>
</object>

Speichern Sie die index.html-Datei und öffnen Sie sie in einem Browser, der das <embed>-Tag nicht unterstützt, wie z. B. Internet Explorer. Vergewissern Sie sich, dass die Fallback-Option funktioniert.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich gelernt, wie Sie ein Video zu einer Webseite hinzufügen, indem Sie das HTML <embed>-Tag verwenden. Vergessen Sie nicht, auf Browserunterstützung zu prüfen und die Fallback-Option zu verwenden, wenn erforderlich.

HTML Externe Inhalte/Plugin