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.
Two versions of the code will appear. For WordPress, you want to pick the “Using an iFrame” version and copy this 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.
Search for and add the Custom HTML block to your content.
Paste the iFrame code from Twitch in the space provided.
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.”
Publish or update your post and the Twitch stream is visible on your site.
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.
Paste the code where you want the Twitch stream to show.
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=”.
Replace this with your own domain name. Again, I’m using “coloradoplays.com.”
Now, publish or update your post and the stream is visible on your website.
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.
Just make sure you’re installing the right plugin you want for your website.
Go to Settings and click the Twitch TV option.
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:
This will grab the top 5 streamers within any given gaming title on Twitch.
The plugin will pull any language code available for WordPress…which is an incredible amount of support.
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.
Speaking of teams, you can add your twitch.tv team to the feed and all players will show.
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.
Scroll back up a bit to the Twitch Player Preview. Copy the shortcode: getTwitchPlayer.
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.
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.
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.
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.
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.
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.
- Should You Stream Popular Games to Get Views on YouTube? - September 22, 2021
- How to Use Buy Me a Coffee for Streams and Videos - September 21, 2021
- Building a YouTube Channel Part 3 – The Schedule - September 20, 2021