Twitch Streams in WordPress: Instructions

You want to Embed Twitch streams into your WordPress websiteto provide your visitors with live content directly on your site. This is an effective way to engage your community and increase dwell time. Here's a detailed guide on how to do it safely and effectively.

There are several ways to embed Twitch streams in WordPress, with the Gutenberg editor offering the easiest method for modern WordPress installations. We'll walk you through all the common ways so you can choose the option that's right for you.

1. Per The Gutenberg Block

Since WordPress 5.0, the Gutenberg editor has been the default. It offers a dedicated block for Twitch streams, making embedding a breeze.

Step 1: Add a new block Open the post or page where you want to embed the stream. Click the +icon (Add Block) and search for "Twitch." Select the Twitch block.

Step 2: Insert Twitch URL The block will prompt you to enter a Twitch URL. You can either:

The URL of a specific live stream (e.g. https://www.twitch.tv/dein_streamer_name)
The URL of a VOD (video on demand, e.g https://www.twitch.tv/videos/123456789)
The URL of a clip (e.g. https://www.twitch.tv/dein_streamer_name/clip/AmazingClipName)

Paste the desired URL and click "Embed." WordPress will take care of the rest and generate the appropriate embed code.

Step 3: Adjust block options (Optional) After embedding, you'll see the stream player in the editor. You'll find additional options in the right side panel (Block Settings):

Width and height: You can specify absolute pixel values or percentage widths. For a responsive display, a percentage width (e.g., 100%) and a fixed height are often recommended, or you can leave it to the default auto-scaling behavior.
Show chat: Enable this option if you want to display Twitch chat alongside the stream.
Autoplay: Autoplay is disabled by default. For usability reasons (unexpected audio playback) and performance reasons (direct noise pollution), you should not enable autoplay unless you have a very specific use case where it is expected.
“Parent” domain: For the embed to function correctly, especially if chat or certain interactions are required, Twitch may require a "parent" domain in the embed parameters. This is often handled automatically in the block settings, but it's essential when using the manual method (see below).

Advantages of the Gutenberg block:

Extremely easy to use.
No manual code intervention necessary.
WordPress takes care of the necessary adjustments.

2. Via oEmbed (deprecated)

WordPress supports oEmbed for many external services, including Twitch. This means you often just need to put the URL on a new line in your editor, and WordPress will automatically convert it into the appropriate embed code. This works in both the classic editor and the Gutenberg editor (if you simply paste a URL into a paragraph block).

Step 1: Copy Twitch URL Go to the Twitch stream or VOD you want to embed and copy the full URL from your browser's address bar.

Step 2: Paste the URL into the editor Paste the copied URL into a new line in your WordPress editor. Make sure nothing else appears on this line.

Example:

https://www.twitch.tv/dein_streamer_name

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

Step 3: Save/Update When you save or update the post, WordPress will automatically convert the URL to the player.

Advantages of oEmbed:

Even simpler than the Gutenberg block if you just want the player without chat.
Also works in older WordPress versions with the classic editor.

Disadvantage:

Fewer customization options directly in the editor; for chat, etc., you need the full embed code method.

3. Via Twitch Embed Code (iframe)

This method is the most flexible and offers the most customization options. It's ideal if you want to control specific parameters like chat position, autoplay, or other player options.

Step 1: Generate Twitch embed code

For a live channel: Go to the streamer’s channel (e.g. https://www.twitch.tv/dein_streamer_name). Click the "Share" icon below the video player. Select "Embed."
For a VOD/Highlight/Clip: Open the video/clip. Click the "Share" icon. Select "Embed."

A window will open with the embed code. You can adjust various options here before copying the code:

Width & Height: Adjust the size of the player.
Show chat: Add or remove the chat window.
“Parent” domains: This is an important point for the security and functionality of the Twitch embed. You must enter the domain(s) from which the stream will be embedded. For example: YourDomain.deIf you don't do this, errors may occur (e.g., "Error 404: Not Found" for the chat or the stream won't load). Add each domain and subdomain from which the embed is accessed in this field (e.g., yourdomain.de, www.yourdomain.de, blog.yourdomain.de).

Copy the generated -Code.

Example of an embed code: (Note the placeholders YOUR_CHANNEL_NAME_HERE and YOUR_PARENT_DOMAIN_HERE)

To additionally embed the chat, the code would look like this:

A notice: The parent Parameters are crucial for functionality and security. Without the correct domain(s), the embed won't load correctly or the chat will display errors.

Step 2: Insert code into WordPress

In the Gutenberg editor: Add a “Custom HTML” block and paste the copied -code there.
In the Classic Editor: Switch from “Visual” mode to “Text” mode (formerly “HTML mode”) and paste the code where you want it.

Advantages of direct embed code:

Maximum control over size, chat and player behavior.
Useful for specific use cases, such as adding additional parameters (e.g. muted=true for silent start).

Disadvantages:

Requires a basic understanding of HTML.
More error-prone if parameters are not set correctly.

4. Twitch Plugins

There are WordPress plugins that make Twitch integration easier. One example would be "EmbedPress" or specific Twitch plugins. However, the native WordPress features (Gutenberg block, oEmbed) already offer sufficient options in most cases.

When a plugin might be useful:

If you need special features that go beyond the standard embedding (e.g. multiple streams at the same time, automatic stream lists, specific styling options that cannot be solved via CSS).
If you use the classic editor and the manual method but need more options than oEmbed.

And this is where the StreamWP plugin comes into play.

StreamWP

StreamWP is currently under development and will be released soon.

Conclusion

Embedding Twitch streams in WordPress is straightforward thanks to the Gutenberg editor and oEmbed support. For maximum control and customization, the direct Twitch code offers the greatest flexibility, but requires correct configuration of the parent domains.

Embedding Twitch streams in WordPress is incredibly easy thanks to native blocks and oEmbed functions and can be done manually iframe-Adaptations for special requirements can be refined.

Sources: