How to Embed a Twitch Stream into WordPress

Last Updated on September 28, 2020 by Michael Brockbank

As a Twitch streamer, you want as many eyes on your video as possible. And if you have a WordPress website, you can get even more people watching when you embed the Twitch stream on a page or even in the sidebar.

And speaking from experience, embedding Twitch can rocket your audience and add to your watch time. This is quite valuable if you’re trying to become an affiliate or partner.

Today, I’ll show you a few methods to embed Twitch streams into your WordPress website.

3 Ways to Embed a Twitch Stream in WordPress

OK, so we have three different methods we can use easily in WordPress:

  • Using the Channel’s Sharing Code
  • Using a Twitch WordPress plugin
  • Adding iFrames Manually from Twitch Developers

And yes, these methods work to embed Twitch as a responsive element. Which means the video will automatically resize itself to fit anywhere on your website.

However, I suggest using the proper widths in WordPress sidebars and posts. From my experience, it just looks better overall.

1. Embed Twitch from Channel Sharing

Perhaps one of the easiest methods for adding your stream to WordPress is through the channel sharing method. You simply copy and paste the iFrame code from Twitch and place it anywhere you want on the website.

But, there is a caveat.

You need to slightly adjust the coding for it to work right. This is because of how it validates remote embedding. So, you need to own the domain AND have an SSL attached.

And you can add virtually any channel to your site you want.

First, go to any channel in Twitch. Click the “Share” icon and select “Embed.” The share icon is the up-arrow coming out of a platform.
Embed Twitch Coding

Two versions of the code will appear. For WordPress, you want to pick the “Using an iFrame” version and copy this code.
Copy iFrame Code

Because WordPress has two different layouts you can use, I’ll show how to add the code to both Gutenberg and the Classic editors.

For Gutenberg Editor

Go to any post or page in WordPress and add a new block.
Add Block

Search for and add the Custom HTML block to your content.
Custom HTML Block

Paste the iFrame code from Twitch in the space provided.
Paste Code into Gutenberg

Here is where some people will have an issue. Twitch requires the domain to be listed in the code as the “parent” site. If you don’t change this, the iFrame code will not work.

You will get the “Twitch refused to connect” error with a grey box.

Find the “example.com” string and replace it with your own domain. It’s the portion following “parent=” in the iFrame code. In this case, I’m just using “coloradoplays.com.”
Replace Domain in Gutenberg

Publish or update your post and the Twitch stream is visible on your site.
Visible Twitch Stream

For the Classic Editor in WordPress

Go to any WordPress page, post, or other custom post type you might have. For this tutorial, I’m just going to add it to a post that I’m going to delete later.

Click the “Text” tab in the editor. You won’t be able to use the iFrame in the visual editor as WordPress will automatically adjust the code to visual elements. In other words, it won’t work.
WordPress Text Editor

Paste the code where you want the Twitch stream to show.
Paste iFrame from Twitch

As in the example above, Twitch requires the embed to list the domain. So, you must add your own domain to the code so the embed will connect to Twitch.

Find the segment “www.example.com” in the code. It’s the web address right after “parent=”.
Find Example Segment

Replace this with your own domain name. Again, I’m using “coloradoplays.com.”
Replace Domain in Twitch Embed

Now, publish or update your post and the stream is visible on your website.
Live Twitch Feed

This entire process should take you less than a few minutes.

You can add this snippet nearly anywhere in WordPress. For example, I have our channel displayed inside the right sidebar. It’s also available on the Twitch Feed page, but I’m using a plugin to show different streams.

Speaking of which…

2. Embed Twitch with a WordPress Plugin

There’s only a couple of embed Twitch plugins available for WordPress. Probably because the method above works exceptionally well. Still, you have the option to add a plugin if you want.

And today, I’m demonstrating the Twitch TV Easy Embed (Player) add-on. It’s not a bad tool, but it is a bit limited compared to other methods.

Let me show you what I mean.

Install and activate the Twitch TV Easy Embed plugin. Streamweasels makes several plugins for Twitch, and all of them are quite similar. Each one does a different layout, and I’m not sure why they broke the plugin up in such a fashion. But, it is what it is.
Twitch Embed Player Plugin

Just make sure you’re installing the right plugin you want for your website.

Go to Settings and click the Twitch TV option.
Easy Embed Options

You’ll see a screen with the different layout options available from the developer. These are examples of those other plugins that you can use from Streamweasels. If you don’t like this one, you can try any of the others to fit your needs.

Scroll down to the actual settings area.

NOTE: The following is for the “Main Options” tab. The only setting in the “Appearance Tab” is to change your color mode between light and dark. If you want to see what this looks like, check out our Twitch Feed page. I am using the “Dark” mode for that display.

Main Options Tab

Now, you have several options to embed Twitch on your website. You can filter the display by:

  • Game
    This will grab the top 5 streamers within any given gaming title on Twitch.
  • Language
    The plugin will pull any language code available for WordPress…which is an incredible amount of support.
  • Channel
    You can add your own channel here as well as any number of others while separating them with a comma. This is perfect for teams or other groups.
  • Team
    Speaking of teams, you can add your twitch.tv team to the feed and all players will show.
  • Limit
    If you’re using the free version, this limit defaults to 5. Otherwise, you can change how many players show at any given time.
  • Show Offline Channels?
    This lets you display player channels even if they’re not online. If you only show your channel, it’s probably a good idea to check this box. That way, visitors won’t confuse the empty screen as being broken.
  • Show Featured Stream by default?
    This is another paid version feature. The plugin will automatically show the person who has the highest number of concurrent viewers at that moment.
  • Show Chat?
    And yet another paid feature, you can choose to show the chat of the Twitch embed directly on your site.

You can set these options up how you see fit depending on what you want to show on your website. In this tutorial, I’m simply adding the channel name and leaving everything else set to their default settings.

Saving and the Shortcode

Once you’re done, click the “Save Changes” button on the bottom left.
Save Twitch Embed Changes

Scroll back up a bit to the Twitch Player Preview. Copy the shortcode: getTwitchPlayer.
Copy Twitch Embed Shortcode

Now paste this shortcode into any post or page in WordPress. If you’re using Gutenberg, you can add a shortcode block and paste it that way.

As I use the Classic editor, I just paste the code directly into a page.
Paste Twitch Code

Why I’m On the Fence with This Plugin

This plugin works great for what it is. I don’t know if I like how visitors actually have to click on any particular channel to watch instead of it loading automatically.

I get the developer needs to sell a premium version to make money. But since I can just use iFrame coding directly from Twitch, I’m not sure if this is all that incredible of a setup.

Especially since you can do so much with iFrames, if you have the know-how. And that’s the kicker…you need to know how to run iFrames.

3. Embed Twitch Manually with iFrame Coding

Technically, this method is virtually identical to Channel Sharing. The only real difference is how much control you actually have over the coding itself.

Now, this is for those who are confident enough to handle iFrame or HTML coding elements. One wrong character, and the embed will not work.

You can get a list of everything you can do when you embed a Twitch stream from the Developer’s docs. In fact, this document has everything you’ll need to learn about inline frames, the Twitch API, and other elements of the system.

I won’t go too much into detail as there are far too many things that you can do. However, I will point out a few tips and tricks when using iFrames…especially in WordPress.

Tip #1: Don’t include the < or > for Attributes

When browsing the Developer’s docs, you’ll see several things you can change. In the attributes themselves, do not include the < or > in the example.

For instance, instead of width=”<width>”, you’d put something like width=”400″, which would equal 400 pixels wide. My point is to remove the < or > when adding attributes.
iFrame Attributes

Tip #2: Consider using the “muted” attribute.

By default, the Twitch feed will be audible. But, what if you have visitors who don’t want to hear the stream right off the bat or who are uninterested in the live play? Adding the mute function gives them the choice to hear the stream or not.

You can add default to mute by adding the muted=”true” attribute to the iFrame.
Muted Attribute

Tip #3: Consider different sizes of the iFrame

Using the height and width attributes, you can reshape the size of the window when you embed Twitch. This means you can alter it to fit just about any location.

However, understand that the Twitch feed is responsive. This means although you’ll resize the iFrame window, the actual video feed will modify itself to fit according to the stream’s aspect ratio.

So, if you make a super tall window but make it incredibly thin, Twitch will adjust the aspect ratio to fit perfectly in those constraints.

In other words, the Twitch feed will be super small according to the smallest dimensions in the iFrame.

Aspect Ratio
Width=310 and height=700

Tip #4: Consider Adding the Chat Window

Interaction is key when streaming live on Twitch. If people are able to chat with you, all the better. You can do this by adding the iFrame for chat directly from Twitch.

Embedding Chat

Why Should You Embed Twitch Video?

As I said earlier, adding a Twitch stream to your website can have a profound impact on your channel. This is especially true if you have a site that gets several hundred visitors per day.

For example, I have our live streams available in the sidebar of this website. You’ll see it on the left, if you’re using a desktop computer. Otherwise, you’ll have to scroll down on a mobile device.

Any time I’m live on Twitch, the video is shown. I set the stream to be muted automatically because I know how it feels to visit a site only to get bombarded by audio.

During any given night, I’d say roughly half of the views we get while playing come from the embed of the Twitch stream on ColoradoPlays.com.

Something else you should consider is how well this works to promote a team or group of players. Using something like the plugin above, you can have everyone who has a Twitch channel available at the click of a mouse.

In other words, it’s a great method for promoting your Twitch channel as well as improving the engagement of your website.

Which method do you prefer to embed Twitch?

Personally, I prefer the first method as it doesn’t require a lot of thought or action. You can simply copy and paste the feed directly from any channel on Twitch.

However, the other two methods do have potential if I want to take things a bit further than just a simple embed from Twitch. Either way, you have options to easily add more to your WordPress website.

It all comes down to what you want to show your visitors.

Michael Brockbank
(Visited 464 times, 1 visits today)

Michael Brockbank

Michael developed ColoradoPlays to help various charities through his favorite pastime. Since then, the blog and Twitch channels have donated several hundred dollars to Extra Life, Geeks of Grandeur and Operation Supply Drop to name a few.

LIVE NOW! CLICK TO VIEW.
CURRENTLY OFFLINE
%d bloggers like this: