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.
<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.
<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...