Twitch.tv, formerly known as Justin.tv, is one of the leading platforms within the live streaming industry. Catering mostly to the ever growing populous of the gaming demographic, Twitch has helped center its brand around being the go to platform for those interested in streaming video games.
In 2017, Twitch exceeded a total of 355,000,000 minutes watched with over 2 million unique monthly broadcasters. In more recent news, Twitch partner Ninja recently broke the record for peak concurrent viewers on an individual channel with 628,000 viewers while playing Fortnite alongside rappers Drake & Travis Scott, and NFL player Juju Smith. Needless to say the expected growth from that event alone is sure to help provide Twitch with even greater success in 2018.
With it’s constant growth and easy access viewing platform Twitch becomes a very powerful tool that can be utilized within your own WordPress site. The steps to embed a Twitch live stream are actually quite simple. Twitch itself provides you everything needed to embed your own live stream and chat within your WordPress website.
1. Head to the Twitch.tv home page.
2. If you are planning on embedding your own channel, make sure you are logged in for easy access to your channel itself by clicking on the top right drop down list for your account. Click on the ‘My Channel’ option from the list.
3. Once on your channel page, look for the ‘Share’ button near the bottom right corner of the video player.
4. Once you click on this you will see an ‘Embed Channel’ and ‘Embed Chat’ box each with a line of HTML code that can be copied. Copy the ‘Embed Channel’ code.
5. Once copied, head back to your WordPress website and paste the ‘Embed Channel’ code you just copied.
<iframe src="https://player.twitch.tv/?channel=maxmediacreates" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe><a href="https://www.twitch.tv/maxmediacreates?tt_content=text_link&tt_medium=live_embed" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px; text-decoration:underline;">Watch live video from maxmediacreates on www.twitch.tv</a>
6. Twitch adds a bit of extra code in order to provide a clickable link underneath the embedded player code provided. You can remove that code if you’d like and it will not make any changes to your embedded video. Below is an example of the embedded video code with the clickable link code removed.
<iframe src="https://player.twitch.tv/?channel=maxmediacreates" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
7. Once you’ve pasted that code in you will want to go back to the Twitch channel page and grab the ‘Embed Chat’ code. Paste the ‘Embed Chat’ line of code underneath your ‘Embed Channel’ code.
<iframe src="https://www.twitch.tv/maxmediacreates/chat?popout=" frameborder="0" scrolling="no" height="500" width="350"></iframe>
8. With both of these pieces of code pasted onto the page, you can now hit preview to take a look at your embedded player and chat box.
9. You can also adjust the height and width of these boxes to fit accordingly. You can also use shortcode to create columns if you’d like these two boxes to sit side by side on the page.
10. You are also able to embed ANY channel on Twitch onto your page. They do not need to be only your own channel to embed. If you’d like to embed another Twitch channels stream, you can simply change the name in the code from your channel to thiers.
<iframe src="https://player.twitch.tv/?channel=STREAMCHANNELNAME" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
<iframe src="https://www.twitch.tv/STREAMCHANNELNAME/chat?popout=" frameborder="0" scrolling="no" height="500" width="350"></iframe>
Overall, Twitch makes embedding a live stream onto a WordPress website very easy to accomplish. They provide you all of the code that you need in order to embed it directly onto your site. If you are looking to embed a Youtube Live stream please feel free to take a look at our previous tutorial located right here!
If you have any questions or run into any issues while attempting to embed your Twitch stream, please feel free to let us know in the comments below!
WordPress is one of the largest platforms for website creation in the world. It accounts for around 29% of the websites running on the internet. Youtube remains one of the leading video platforms on the web with a forecasted userbase of over 184 million...