veröffentlicht am: 11. Juni 2024
HTML: Youtube Video einbinden – So gehts!
Wenn du dein Youtube Video mit HTML in deine Webseite einbinden möchtest, dann geht das relativ einfach. Wie das genau geht zeige ich dir in diesem Beitrag.
HTML-Einbindung von YouTube-Videos
Die einfachste und empfohlene Methode zum Einbinden eines YouTube-Videos ist die Verwendung des Einbettungscodes, der direkt von YouTube generiert wird.
So funktioniert’s:
- Öffne das YouTube-Video, das du einbinden möchtest.
- Klicke auf die Schaltfläche „Teilen“ unter dem Video.
- Wähle die Option „Einbetten“ aus.
- Kopiere den bereitgestellten HTML-Einbettungscode.
- Füge den kopierten Code in deine HTML-Seite an der Stelle ein, an der das Video angezeigt werden soll.
HTML
<!DOCTYPE html>
<html>
<head>
<title>YouTube-Video-Einbindung</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
Vorteile:
- Einfache Implementierung
- Funktioniert in allen gängigen Browsern
- Bietet grundlegende Wiedergabefunktionen (Start, Stopp, Pause, Lautstärke)
Nachteile:
- Eingeschränkte Kontrolle über Design und Anpassung
- Branding von YouTube im Video-Player
- Keine Möglichkeit, zusätzliche Funktionen wie Anmerkungen oder Karten hinzuzufügen
iFrame-Einbettung:
Fortgeschrittene Benutzer können YouTube-Videos mithilfe eines generischen iFrame-Elements in HTML einbinden. Dies bietet mehr Flexibilität und Kontrolle über die Darstellung des Videos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>YouTube-Video-Einbindung</title>
</head>
<body>
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Vorteile:
- Volle Kontrolle über Design und Anpassung des iFrame
- Möglichkeit zum Hinzufügen zusätzlicher Attribute und Funktionen
- Kompatibel mit anderen iFrame-Inhalten
Nachteile:
- Erfordert grundlegende HTML- und iFrame-Kenntnisse
- Kann komplexer in der Implementierung sein
- Kompatibilitätsprobleme mit einigen älteren Browsern möglich
Zusätzliche Hinweise:
- Stelle sicher, dass du die Nutzungsbedingungen von YouTube für die Einbindung von Videos auf deiner Website einhältst.
- Achte auf die Barrierefreiheit und biete alternative Textbeschreibungen für deine Videos an.
- Teste deine Videoeinbindungen in verschiedenen Browsern und Geräten, um eine optimale Darstellung zu gewährleisten.
Über Mich
Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite
