Twitch Streams in WordPress: Anleitung

Du möchtest Twitch-Streams in deine WordPress-Website einbetten, um deinen Besuchern Live-Inhalte direkt auf deiner Seite zugänglich zu machen. Dies ist eine effektive Möglichkeit, deine Community zu binden und die Verweildauer zu erhöhen. Hier ist eine detaillierte Anleitung, wie du das sicher und performant machst.

Das Einbetten von Twitch-Streams in WordPress lässt sich auf verschiedene Arten realisieren, wobei der Gutenberg-Editor die einfachste Methode für moderne WordPress-Installationen bietet. Wir gehen alle gängigen Wege durch, damit du die für dich passende Option wählen kannst.

1. Per Der Gutenberg-Block

Seit WordPress 5.0 ist der Gutenberg-Editor der Standard. Er bietet einen dedizierten Block für Twitch-Streams, was die Einbettung zum Kinderspiel macht.

Schritt 1: Neuen Block hinzufügen Öffne den Beitrag oder die Seite, auf der du den Stream einbetten möchtest. Klicke auf das +-Symbol (Block hinzufügen) und suche nach „Twitch“. Wähle den Twitch-Block aus.

Schritt 2: Twitch-URL einfügen Der Block wird dich auffordern, eine Twitch-URL einzugeben. Du kannst hier entweder:

Die URL eines spezifischen Live-Streams (z.B. https://www.twitch.tv/dein_streamer_name)
Die URL eines VODs (Video on Demand, z.B. https://www.twitch.tv/videos/123456789)
Die URL eines Clips (z.B. https://www.twitch.tv/dein_streamer_name/clip/AmazingClipName)

Füge die gewünschte URL ein und klicke auf „Einbetten“. WordPress kümmert sich um den Rest und generiert den passenden Embed-Code.

Schritt 3: Block-Optionen anpassen (Optional) Nach dem Einbetten siehst du den Stream-Player im Editor. Im rechten Seitenpanel (Block-Einstellungen) findest du weitere Optionen:

Breite und Höhe: Du kannst absolute Pixelwerte oder prozentuale Breiten angeben. Für eine responsive Darstellung empfiehlt sich oft eine prozentuale Breite (z.B. 100%) und eine feste Höhe, oder du überlässt es dem Standardverhalten für Auto-Skalierung.
Chat anzeigen: Aktiviere diese Option, wenn du den Twitch-Chat neben dem Stream anzeigen möchtest.
Autoplay: Standardmäßig ist Autoplay deaktiviert. Aus Gründen der Nutzerfreundlichkeit (unerwartete Audio-Wiedergabe) und Performance (direkte Lärm-Belästigung) solltest du Autoplay nicht aktivieren, es sei denn, du hast einen sehr spezifischen Anwendungsfall, bei dem das erwartet wird.
„Parent“ Domain: Für eine korrekte Funktion des Embeds, insbesondere wenn der Chat oder bestimmte Interaktionen benötigt werden, kann Twitch eine „Parent“-Domain in den Embed-Parametern verlangen. Dies wird in den Block-Einstellungen oft automatisch behandelt, bei der manuellen Methode (siehe unten) ist es jedoch wichtig.

Vorteile des Gutenberg-Blocks:

Extrem einfach zu bedienen.
Keine manuellen Code-Eingriffe notwendig.
WordPress übernimmt die notwendigen Anpassungen.

2. Per oEmbed (veraltet)

WordPress unterstützt oEmbed für viele externe Dienste, darunter Twitch. Das bedeutet, du musst oft nur die URL auf eine neue Zeile in deinem Editor packen, und WordPress wandelt sie automatisch in den entsprechenden Embed-Code um. Dies funktioniert sowohl im klassischen Editor als auch im Gutenberg-Editor (wenn du einfach eine URL in einen Absatzblock einfügst).

Schritt 1: Twitch-URL kopieren Gehe zum Twitch-Stream oder VOD, das du einbetten möchtest, und kopiere die vollständige URL aus der Adressleiste deines Browsers.

Schritt 2: URL in den Editor einfügen Füge die kopierte URL in eine neue Zeile deines WordPress-Editors ein. Achte darauf, dass nichts anderes in dieser Zeile steht.

Beispiel:

https://www.twitch.tv/dein_streamer_name

oder

https://www.twitch.tv/videos/123456789

Schritt 3: Speichern/Aktualisieren Beim Speichern oder Aktualisieren des Beitrags wird WordPress die URL automatisch in den Player umwandeln.

Vorteile von oEmbed:

Noch einfacher als der Gutenberg-Block, wenn du nur den Player ohne Chat möchtest.
Funktioniert auch in älteren WordPress-Versionen mit dem klassischen Editor.

Nachteil:

Weniger Anpassungsmöglichkeiten direkt im Editor; für Chat etc. benötigst du die volle Embed-Code-Methode.

3. Per Twitch Embed-Code (iframe)

Diese Methode ist am flexibelsten und bietet die meisten Anpassungsmöglichkeiten. Sie ist ideal, wenn du spezifische Parameter wie Chat-Position, Autoplay oder andere Player-Optionen steuern möchtest.

Schritt 1: Twitch-Embed-Code generieren

Für einen Live-Kanal: Gehe zum Kanal des Streamers (z.B. https://www.twitch.tv/dein_streamer_name). Klicke auf das „Teilen“-Symbol unter dem Videoplayer. Wähle „Einbetten“.
Für ein VOD/Highlight/Clip: Öffne das Video/den Clip. Klicke auf das „Teilen“-Symbol. Wähle „Einbetten“.

Ein Fenster öffnet sich mit dem Embed-Code. Du kannst hier verschiedene Optionen anpassen, bevor du den Code kopierst:

Breite & Höhe: Passe die Größe des Players an.
Chat anzeigen: Hinzufügen oder Entfernen des Chat-Fensters.
„Parent“ Domains: Dies ist ein wichtiger Punkt für die Sicherheit und Funktion des Twitch-Embeds. Du musst hier deine Domain(s) eintragen, von der aus der Stream eingebettet wird. Beispielsweise: DeineDomain.de. Wenn du dies nicht tust, kann es zu Fehlern kommen (z.B. „Error 404: Not Found“ für den Chat oder der Stream lädt nicht). Füge jede Domain und Subdomain, von der aus der Embed aufgerufen wird, in dieses Feld ein (z.B. deinedomain.de, www.deinedomain.de, blog.deinedomain.de).

Kopiere den generierten <iframe>-Code.

Beispiel für einen Embed-Code: (Beachte die Platzhalter YOUR_CHANNEL_NAME_HERE und YOUR_PARENT_DOMAIN_HERE)

<iframe
    src="https://player.twitch.tv/?channel=YOUR_CHANNEL_NAME_HERE&parent=YOUR_PARENT_DOMAIN_HERE"
    height="480"
    width="850"
    allowfullscreen="true"
    scrolling="no"
    frameborder="0">
</iframe>

Um den Chat zusätzlich einzubetten, würde der Code so aussehen:

<iframe src="https://player.twitch.tv/?channel=YOUR_CHANNEL_NAME_HERE&parent=YOUR_PARENT_DOMAIN_HERE&autoplay=false"
        height="480"
        width="850"
        allowfullscreen="true">
</iframe>
<iframe src="https://www.twitch.tv/embed/YOUR_CHANNEL_NAME_HERE/chat?parent=YOUR_PARENT_DOMAIN_HERE"
        height="480"
        width="350"
        frameborder="0">
</iframe>

Hinweis: Die parent Parameter sind entscheidend für die Funktionsfähigkeit und Sicherheit. Ohne die Angabe der korrekten Domain(s) wird der Embed nicht korrekt geladen oder der Chat wird Fehler anzeigen.

Schritt 2: Code in WordPress einfügen

Im Gutenberg-Editor: Füge einen „Custom HTML“-Block hinzu und füge den kopierten <iframe>-Code dort ein.
Im Klassischen Editor: Wechsle vom „Visuellen“ Modus zum „Text“-Modus (früher „HTML-Modus“) und füge den Code an der gewünschten Stelle ein.

Vorteile des direkten Embed-Codes:

Maximale Kontrolle über Größe, Chat und Player-Verhalten.
Nützlich für spezifische Anwendungsfälle, wie das Hinzufügen weiterer Parameter (z.B. muted=true für stummen Start).

Nachteile:

Erfordert ein grundlegendes Verständnis von HTML.
Fehleranfälliger, wenn Parameter nicht korrekt gesetzt werden.

4. Twitch Plugins

Es gibt WordPress-Plugins, die die Twitch-Integration erleichtern. Ein Beispiel wäre „EmbedPress“ oder spezifische Twitch-Plugins. Allerdings bieten die nativen WordPress-Funktionen (Gutenberg-Block, oEmbed) in den meisten Fällen bereits ausreichend Möglichkeiten.

Wann ein Plugin sinnvoll sein könnte:

Wenn du spezielle Funktionen benötigst, die über die Standard-Einbettung hinausgehen (z.B. mehrere Streams gleichzeitig, automatische Stream-Listen, spezifische Styling-Optionen, die nicht per CSS gelöst werden können).
Wenn du den klassischen Editor verwendest und die manuelle <iframe>-Methode vermeiden möchtest, aber mehr Optionen als oEmbed benötigst.

Und hier kommt das Plugin StreamWP ins Spiel.

StreamWP

StreamWP befindet sich aktuell noch in Entwicklung und wird bald released.

Fazit

Das Einbetten von Twitch-Streams in WordPress ist dank des Gutenberg-Editors und oEmbed-Unterstützung unkompliziert. Für maximale Kontrolle und individuelle Anpassungen bietet der direkte <iframe>-Code von Twitch die größte Flexibilität, erfordert jedoch eine korrekte Konfiguration der „Parent“ Domains.

Die Einbettung von Twitch Streams in WordPress ist dank nativer Blöcke und oEmbed-Funktionen denkbar einfach und kann durch manuelle iframe-Anpassungen für spezielle Anforderungen verfeinert werden.

Quellen: