Here at StreamWeasels, we’ve been working to embed Twitch streams for over 5 years, and in that time we like to think we’ve gotten pretty good at it. Twitch is the largest live-streaming platform on the web, with over 3 million average monthly users. There is plenty of content on Twitch for you to embed in your website and in this guide, we’re going to show you how.
There are a few different ways to embed Twitch streams on your website. There are simple ways to embed Twitch streams and more complicated ways that allow for greater customization and layout options. Here we are going to outline the different methods you can use to embed Twitch streams in your website, quickly and easily.
How to embed Twitch Streams on your website (the easy way)
The absolute easiest way to embed a Twitch stream on your website is to use Twitch’s built-in embedding system. Twitch allows you to embed any stream you want with just a few clicks, even if the stream doesn’t belong to you. To do this, simply find the stream you want to embed and look for the share icon in the bottom right. Click the share icon, and then under Share via, choose Embed.
You will then see a modal window that presents you with two options. You can embed your Twitch stream using Javascript, which is the first and easiest option. Simply highlight the entire code, copy, and paste it into your own website’s HTML code. When done correctly, this is all you need to do.
The second option is to embed the Twitch stream using an iframe. Some users may find using an iframe more convenient, as iframes are widely supported on the web. In this case, copy the entirety of the iframe code and paste it into your website. There is one extra step when using the iframe, and that is to find the text in the iframe code &parent=www.example.com and replace www.example.com with your own website URL.
For example, to embed a Twitch iframe on our own site we would change this:
<iframe src="https://player.twitch.tv/?channel=wolfabelle&parent=www.example.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>to this:
<iframe src="https://player.twitch.tv/?channel=wolfabelle&parent=www.streamweasels.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>How to embed Twitch Streams on WordPress
WordPress, the leading open-source CMS powers over 35% of the web and it’s a great choice and user-friendly way to manage your website. There are many more options when it comes to embedding Twitch streams in WordPress, but the easy way mentioned above will still work perfectly fine for many WordPress websites. Depending on your WordPress theme, we can show you how to take the Twitch javascript or the iframe above and place it onto your WordPress page.
How To Embed Twitch Stream In Gutenberg
Gutenberg is the new block editor in WordPress, introduced in 2018 in version 5.0. Love it or hate it, it’s very easy to embed Twitch streams in Gutenberg. Simply load up your page, and within the block editor, add a new Custom HTML block. This presents you with a simple box that you can paste your Twitch embed code right inside like this.
How To Embed Twitch Stream in WordPress classic editor
The classic editor in WordPress is still favored by many, as seen by the official classic editor plugin with over 5 million downloads. If you’re one of those 5 million users, you’ll be glad to know that embedding Twitch streams inside the classic editor is just as easy. Within your page, simply switch from visual mode to text mode and paste your code.
How to embed Twitch Streams with StreamWeasels Twitch Integration (the awesome way)
When it comes to embedding Twitch streams in WordPress, if you want to do anything more complicated than a simple, single-channel embed, then the StreamWeasels Twitch Integration plugin is the way to go. We have a collection of Twitch WordPress plugins that allow you to embed everything from a single channel, to a list of channels, to a Twitch team plus much more. Not only that, but we have a selection of layouts available that allow you to embed your Twitch streams in a variety of different ways.
How to embed Twitch live status with Twitch Status plugin
If you’re a Twitch streamer and you run your own WordPress website, you may want to simply display your Twitch live status. This means that whenever you’re live on Twitch, anyone that happened to be visiting your WordPress website at that time would be able to join your stream with one simple click.
The Twitch Status plugin lets you do exactly that. Input your Twitch channel username and customize the Twitch Status colors, logos, and more. See a live example below:
How to embed your Twitch team with Twitch Wall plugin
Being part of a Twitch team is a great way to gain more exposure as a Twitch streamer, and it also allows communities and organizations to come together and stream under a shared banner. Twitch doesn’t provide any way for you to embed a Twitch team on a website, but thankfully StreamWeasels has you covered. Our Twitch Integration plugin combined with Twitch Wall allows you to display an entire Twitch team like so:
How to embed Twitch channels with Twitch Player plugin
What if you want to display a list of Twitch channels based on Twitch usernames? Again, Twitch doesn’t have any way to do this but it’s something you can achieve by using our Twitch Integration plugin combined with Twitch Player. Simply paste in a list of comma-separated Twitch usernames and let our plugin do the rest:
This is Twitch Player
Perfect solution to focus on the Twitch embed experience!
How to embed Twitch Videos with Twitch VODS plugin
Another popular feature on Twitch is the Twitch VODs system. VODs stands for Video on Demand and Twitch provides streamers the ability to host videos from their streams, in the form of past broadcasts, clips, and highlights. This is something else you can display on your website using our Twitch Integration plugin with the Twitch Vods add-on.
How to display Twitch status in your WordPress navigation with Twitch Nav plugin
Another cool feature of StreamWeasels Twitch Integration is the ability to display Twitch status in your WordPress navigation with the Twitch Nav add-on. This works particularly well if you have a page on your site dedicated to your live stream. You can have that relevant menu item light up with your viewer count when you’re actually live on Twitch, which will encourage your users to click it and tune in to the stream. See an example below.
Common errors when embedding Twitch content
With all of our experience embedding Twitch content on the web, we have likely come across every Twitch embed error that is out there. Thankfully, some of the most common Twitch embed errors have very simple fixes which we are going to show you below.
Twitch purple screen of death issue
The Twitch purple screen issue was first reported in this post on the Twitch Developer forums back in January 2021. At the time, the purple screen issue was thought to be part of a temporary experiment Twitch was running at the time with embedded Twitch content. However, a few weeks later in February, Jon Bulava confirmed in this post that the Twitch purple screen issue was in fact unrelated to the experiment and that it would be a permanent addition to Twitch embeds going forward. It was also around this time that Twitch users started using the term – Twitch purple screen of death.
To answer the opening question, the purple screen was a permanent addition to the Twitch embed experience. This ads experience may be updated and improved over time as mentioned in the following response.
How to fix the Twitch purple screen of death issue
If you are seeing the Twitch purple screen issue periodically on your Twitch embeds, the unfortunate answer is that there is no way to remove them. They are placed there on purpose by Twitch, which you can see from this last response from Job Bulava in this post. The purple screen message is placed intentionally in order to help combat ad blockers. You might then assume that disabling your ad blocker could help get rid of the purple screen, but that is not the case either, as confirmed by Jon in a separate post here.
The only positive thing to take away from these official posts on the purple screen issue from Twitch is the following message from Jon in one of his last posts regarding the issue.
The teams who focus on the embedded experience have received great feedback from developers and viewers alike, and are considering ways in which this experience can be improved.
One way you might be able to help is to head over to Twitch User Voice – Twitch’s official feedback and suggestions forum. There is one particular thread over there that has picked up some steam that you can read, comment on and vote up. The more attention this Twitch purple screen issue gets through this User Voice post the better, as it may force Twitch to finally sit up and take notice.
player.twitch.tv refused to connect error
The Twitch embed refused to connect error is quite a common one that we see all the time. This one has a straightforward solution, however, to many non-technical users it could be considered complex.
Basically, the player.twitch.tv refused to connect error is caused by Twitch’s own policy of not allowing Twitch embedded content on websites that do not appear secure with a valid SSL certificate (also known as https://).
As outlined in this post from 2020 on the official Twitch developers forum, see this quote from Jon Bulava, Twitch Staff:
With this new configuration, Twitch embeds can only be embedded on https sites. Non-https sites should plan accordingly if they intend on continued use of any Twitch embed experiences that are currently in operation on their site.
How to fix the Twitch refused to connect error
So the reason your Twitch embed is displaying a Twitch refused to connect error is because your website is considered insecure. The solution to this problem is usually to contact your web hosting provider and ask them to help you set up an SSL certificate for your website. If you consider yourself a technical user and you have full unrestricted access to your web server, you may be able to do this yourself, but if not this guide from website builder expert might help.
In Conclusion
Here at StreamWeasels, we think Twitch has done a pretty decent job at providing a solid Twitch embed experience to it’s users. While the default experience certainly has its limitations, we hope that the solutions StreamWeasels has been able to bring to the WordPress space have helped fill a significant gap.
If you are in the WordPress space and are looking for a reliable and flexible way to embed Twitch streams, I’m sure you can see from this article that StreamWeasles has you covered. Feel free to take a look around our website and consider purchasing StreamWeasels Twitch Integration, and if you have any questions please don’t hesitate to reach out.
Finally, you can also choose to read all there is to know about how to embed YouTube Live and YouTube Videos.