Twitch Developers: Embedding Video and Clips
Player-URLs und der Parameter parentdev.twitch.tv/docs/embed/video-and-clipsTwitch Developers: Embedding Video and Clips
Twitch-Einbettungscode-Generator
Binden Sie kostenlos einen Twitch-Livestream, eine vergangene Übertragung oder einen Clip in Ihre Website ein. Domain angeben und einen einsatzbereiten Player-Code kopieren. Ohne Registrierung.
Zeigt den Livestream des Kanals. Ein Name oder ein Link, z. B. https://www.twitch.tv/twitch
Möchten Sie den ganzen channel als Galerie, die sich selbst aktualisiert? Eckenradius
<div style="position:relative;border-radius:24px;overflow:hidden;width:100%;aspect-ratio:16 / 9;"> <iframe style="position:absolute;inset:0;width:100%;height:100%;border:0;" src="https://player.twitch.tv/?channel=twitch&parent=example.com&autoplay=false&muted=true" title="Twitch player" loading="lazy" allowfullscreen></iframe> </div> <p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Erstellt mit <a href="https://de.elfsight.com/tools/twitch-embed-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>
- Klicken Sie oben auf Code kopieren, um ihn zu kopieren.
- Öffnen Sie die HTML-Datei oder die Vorlage der Seite.
- Fügen Sie den Code innerhalb von
<body>ein, dort wo der Inhalt erscheinen soll. - Speichern und laden Sie die Seite hoch und öffnen Sie sie zur Kontrolle im Browser.
Brauchen Sie mehr als ein Video?
Zeigen Sie den ganzen channel als interaktive Galerie, die sich selbst aktualisiert.
Video Gallery für HTML ansehen →Elfsight Video Gallery
Streams und Videos mehrerer Kanäle zeigen
Video Gallery zeigt Twitch-Videos eines Kanals oder einer Kategorie an, neben Ihren YouTube-Videos.
Aktualisiert sich automatisch, wenn Sie neue Videos veröffentlichen
Karussell, Raster, Masonry oder Player mit Playlist
YouTube, Vimeo, TikTok, Instagram, Twitch und jeder Videolink
Ohne Programmierung – funktioniert auf jeder Website
Dieser Generator im Vergleich zum eigenen Einbettungscode von Twitch
Der Einbettungscode von Twitch funktioniert, aber Ihre Domain und den passenden Player müssen Sie selbst eintragen bzw. auswählen. Das ist der Unterschied.
Einbetten-Button von Twitch
Dieser Generator
Ihre Domain (
parent)Sie tragen jede Domain von Hand in den Code ein.
Geben Sie eine oder mehrere Domains ein;
https://, Pfade und Ports werden für Sie entfernt.Streams, Videos und Clips
Für jeden gibt es andere Player und URLs.
Fügen Sie einen beliebigen twitch.tv- oder Clip-Link ein – der passende Player wird automatisch gewählt.
Video-IDs
Benötigen ein
v vor der Zahl.Fügt das
v für Sie hinzu.Autoplay
Streams und Videos starten standardmäßig von selbst, Clips nicht.
Aus, bis Sie es einschalten; Stumm starten ist standardmäßig an.
Größe
Sie legen Breite und Höhe fest; mindestens 400×300 px.
Optionaler responsiver 16:9-Wrapper.
Ihre Domain (parent)
Einbetten-Button von Twitch
Sie tragen jede Domain von Hand in den Code ein.
Dieser Generator
Geben Sie eine oder mehrere Domains ein;
https://, Pfade und Ports werden für Sie entfernt.Streams, Videos und Clips
Einbetten-Button von Twitch
Für jeden gibt es andere Player und URLs.
Dieser Generator
Fügen Sie einen beliebigen twitch.tv- oder Clip-Link ein – der passende Player wird automatisch gewählt.
Video-IDs
Einbetten-Button von Twitch
Benötigen ein
v vor der Zahl.Dieser Generator
Fügt das
v für Sie hinzu.Autoplay
Einbetten-Button von Twitch
Streams und Videos starten standardmäßig von selbst, Clips nicht.
Dieser Generator
Aus, bis Sie es einschalten; Stumm starten ist standardmäßig an.
Größe
Einbetten-Button von Twitch
Sie legen Breite und Höhe fest; mindestens 400×300 px.
Dieser Generator
Optionaler responsiver 16:9-Wrapper.
So verwenden Sie den Twitch-Einbettungscode-Generator-Generator
Wählen Sie, was eingebettet werden soll
Ein Live-Kanal, eine vergangene Übertragung oder ein Clip.
Domain hinzufügen
Twitch spielt Einbettungen nur auf den Domains ab, die im Parameter parent aufgeführt sind.
Code kopieren
Fügen Sie ihn in einen HTML- oder Einbettungsblock auf dieser Domain ein.
Twitch-Einbettungsparameter
Parameter
Funktion
Beispiel
channelZeigt den Livestream eines Kanals.
channel=yourchannelvideoZeigt eine vergangene Übertragung, ein Highlight oder einen Upload. Vor der ID muss ein
v stehen.video=v123456789collectionSpielt eine Sammlung von Videos ab. Zusammen mit
video beginnt sie bei diesem Video.collection=abc123clipZeigt einen Clip. Wird mit
https://clips.twitch.tv/embed verwendet.clip=SlugOfTheClipparentDomain, die den Player anzeigen darf. Pflichtangabe. Wiederholen Sie ihn für jede Domain.
parent=example.com&parent=www.example.comautoplayStartet die Wiedergabe ohne Klick. Standard:
true für Streams und Videos, false für Clips.autoplay=falsemutedStartet ohne Ton. Standard:
false.muted=truetimeStartpunkt eines Videos in Stunden, Minuten und Sekunden.
time=1h2m3swidth, heightPlayer-Größe in Pixeln oder Prozent. Mindestens 400×300.
width="100%"allowfullscreeniFrame-Attribut, mit dem Zuschauer in den Vollbildmodus wechseln können.
<iframe … allowfullscreen>channel
Funktion
Zeigt den Livestream eines Kanals.
Beispiel
channel=yourchannelvideo
Funktion
Zeigt eine vergangene Übertragung, ein Highlight oder einen Upload. Vor der ID muss ein
v stehen.Beispiel
video=v123456789collection
Funktion
Spielt eine Sammlung von Videos ab. Zusammen mit
video beginnt sie bei diesem Video.Beispiel
collection=abc123clip
Funktion
Zeigt einen Clip. Wird mit
https://clips.twitch.tv/embed verwendet.Beispiel
clip=SlugOfTheClipparent
Funktion
Domain, die den Player anzeigen darf. Pflichtangabe. Wiederholen Sie ihn für jede Domain.
Beispiel
parent=example.com&parent=www.example.comautoplay
Funktion
Startet die Wiedergabe ohne Klick. Standard:
true für Streams und Videos, false für Clips.Beispiel
autoplay=falsemuted
Funktion
Startet ohne Ton. Standard:
false.Beispiel
muted=truetime
Funktion
Startpunkt eines Videos in Stunden, Minuten und Sekunden.
Beispiel
time=1h2m3swidth, height
Funktion
Player-Größe in Pixeln oder Prozent. Mindestens 400×300.
Beispiel
width="100%"allowfullscreen
Funktion
iFrame-Attribut, mit dem Zuschauer in den Vollbildmodus wechseln können.
Beispiel
<iframe … allowfullscreen>Der Parent-Fehler – was er bedeutet und wie Sie ihn beheben
Der Player zeigt einen Fehler statt des Streams
Twitch verlangt, dass jede Einbettung die Domains, auf denen sie läuft, im Parameter parent auflistet. Fehlt er oder passt er nicht zur Domain der Seite, sehen Zuschauer einen Fehler und einen Link, um auf Twitch zu schauen. Tragen Sie Ihre Domain in parent als einfachen Namen ein, etwa parent=example.com – ohne https://, ohne Pfad, ohne Port.
Es funktioniert unter einer Adresse, unter einer anderen nicht
Fügen Sie für jede Domain, unter der die Seite aufgerufen wird, einen eigenen parent hinzu, zum Beispiel parent=example.com&parent=www.example.com&parent=staging.example.com.
Ihre Website nutzt kein HTTPS
Twitch verlangt von Websites, die den Player einbetten, ein SSL-Zertifikat. Rufen Sie die Seite über https:// auf; eine einfache http://-Seite spielt nichts ab.
Es schlägt nur in Ihrem Website-Baukasten fehl
Manche Baukästen zeigen Ihren Code in einem Frame auf einer eigenen Domain an. Fügen Sie diese Domain als weiteren parent hinzu oder prüfen Sie die veröffentlichte Seite statt des Editors.
Der Player ist zu klein
Twitch-Einbettungen müssen mindestens 400 px breit und 300 px hoch sein.
Autoplay startet nicht
Autoplay setzt voraus, dass der Player groß genug und auf dem Bildschirm sichtbar ist. Auf Smartphones müssen Zuschauer auf Wiedergabe tippen. Verdecken Sie den Player nicht mit anderen Seitenelementen.
Player-Links für Streams, Videos und Clips
Was Sie einbetten
Player-URL
Livestream
https://player.twitch.tv/?channel=NAME&parent=example.comVergangene Übertragung, Highlight oder Upload
https://player.twitch.tv/?video=v123456789&parent=example.comSammlung
https://player.twitch.tv/?collection=ID&parent=example.comClip
https://clips.twitch.tv/embed?clip=SLUG&parent=example.comLivestream
Player-URL
https://player.twitch.tv/?channel=NAME&parent=example.comVergangene Übertragung, Highlight oder Upload
Player-URL
https://player.twitch.tv/?video=v123456789&parent=example.comSammlung
Player-URL
https://player.twitch.tv/?collection=ID&parent=example.comClip
Player-URL
https://clips.twitch.tv/embed?clip=SLUG&parent=example.comEine Kanal-Einbettung zeigt den Stream nur, solange der Kanal live ist. Clips haben einen eigenen Player auf clips.twitch.tv. Jede URL braucht parent mit Ihrer Domain, und Ihre Website muss HTTPS verwenden. Siehe die Dokumentation zum Einbetten von Videos und Clips von Twitch.
Einbettungscode vs. Elfsight Video Gallery
Einbettungscode
Video Gallery
Videos pro Einbettung
Ein Video (oder eine Playlist)
Unbegrenzt viele Videos in einem Widget
Bleibt aktuell
Code für jedes neue Video bearbeiten
Neue Twitch-Videos erscheinen automatisch
Quellen mischen
Eine Plattform pro Snippet
YouTube, Vimeo, TikTok, Instagram, Twitch und jeder Video-Link
Layouts
Einzelner Player
Player mit Galerie, Karussell, Raster, Masonry, Playlist
Responsives Design
Braucht einen CSS-Wrapper
Integriert
Programmierung
Code für jedes Video kopieren und einfügen
Kein Code – visuell im Editor bearbeiten
Preis
Kostenlos
Kostenloser Tarif, keine Kreditkarte nötig
Videos pro Einbettung
Einbettungscode
Ein Video (oder eine Playlist)
Video Gallery
Unbegrenzt viele Videos in einem Widget
Bleibt aktuell
Einbettungscode
Code für jedes neue Video bearbeiten
Video Gallery
Neue Twitch-Videos erscheinen automatisch
Quellen mischen
Einbettungscode
Eine Plattform pro Snippet
Video Gallery
YouTube, Vimeo, TikTok, Instagram, Twitch und jeder Video-Link
Layouts
Einbettungscode
Einzelner Player
Video Gallery
Player mit Galerie, Karussell, Raster, Masonry, Playlist
Responsives Design
Einbettungscode
Braucht einen CSS-Wrapper
Video Gallery
Integriert
Programmierung
Einbettungscode
Code für jedes Video kopieren und einfügen
Video Gallery
Kein Code – visuell im Editor bearbeiten
Preis
Einbettungscode
Kostenlos
Video Gallery
Kostenloser Tarif, keine Kreditkarte nötig
Häufig gestellte Fragen
Offizielle Dokumentation
Twitch Developers: Embedding Twitch
Anforderungen an Einbettungen (HTTPS, parent, Größe)dev.twitch.tv/docs/embedTwitch Developers: Embedding Twitch
Weitere kostenlose Tools
YouTube-Einbettungscode-Generator
Fügen Sie einen beliebigen YouTube-Link ein und erhalten Sie in Sekunden einen responsiven Einbettungscode.YouTube-Einbettungscode-Generator
Video-Einbettungscode-Generator
Betten Sie ein Video ein, das überall liegen kann: MP4, Google Drive, Dropbox, Loom oder Wistia.Video-Einbettungscode-Generator
Vimeo-Einbettungscode-Generator
Fügen Sie einen Vimeo-Link ein und erhalten Sie einen responsiven Einbettungscode.Vimeo-Einbettungscode-Generator
Video-Schema-Generator
Erstellen Sie strukturierte VideoObject-Daten (JSON-LD) für jedes Video.Video-Schema-Generator
Ähnliche Leitfäden
Video auf einer Website einbetten
Laden Sie das Video auf YouTube oder Vimeo hoch und fügen Sie dessen Einbettungscode ein, nutzen Sie das HTML5-Video-Tag für Dateien, die Sie selbst hosten, oder ein Video-Galerie-Widget, wenn Sie mehrere Videos brauchen. Hier steht, wie jede Methode funktioniert und wann Sie sie nutzen.Video auf einer Website einbetten