by | Feb 5, 2018 | Streaming

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 users by the end of 2018.

Of course it would make sense that there is a myriad of developers, content creators, bloggers and even vloggers, who would be interested in integrating the two platforms. Youtube allows for a very simple embed option for Youtube videos, however, embedding a Youtube Live stream can be slightly trickier. There are WordPress plugins that exist that can help you achieve this goal very quickly. If you are someone who likes to keep as your site as clean as possible by using code rather than equipping additional plugins, than this method is right up your alley. Additionally, the biggest aspect about using this method that makes it unique is we are going to show you have to embed your Youtube Live stream’s chat alongside your video, which most of the plugin options do not allow. For this tutorial it would be best to have Youtube & your WordPress site you plan to embed the live stream on both up so you can follow along with the steps.

1. Head to Youtube.com and get yourself logged into your Youtube/Google account.

2. Click the ‘Creator Studio’ option underneath your icon at the top of the screen.

3. Head to the ‘Live Streaming’ dashboard under your ‘Creator Studio’ tab.

Once you are in the ‘Live Streaming’ dashboard you will see a myriad of different options and settings that can be adjusted and messed with. This includes:

Basic Info: Here you can adjust the title, description, category & privacy level of your stream. You can also schedule your stream at this point if you plan on setting up a stream for a future date. The privacy levels are important here because you have three options: Public, Unlisted & Private. Public will allow anyone to stumble upon your live stream even on the home page of Youtube, Unlisted will make it so only people with the link can view the stream & Private will make it so only you can view it. These are important because you must have the stream set to Public or Unlisted in order for those viewing your website to be able to see the embedded live stream.

Encoder Setup: These are the settings you will need to apply to any sort of third party streaming software such as Xsplit or OBS. I personally recommend OBS, it is free and very versatile.

Live Streaming Checklist: This is a just a handy checklist provided by Youtube to try and help cover all the bases for your live stream. You can hide this panel if you don’t find it necessary.

Live Chat: This is a live look at your current chat room for your live stream.

Analytics & Stream Health: Stats and how well your stream is currently running.

Share: The unique Youtube URL for your future broadcast & social buttons for easy sharing of your direct link.

4. Once you have looked over your ‘Live Streaming’ dashboard you are going to take a look at the Share section and copy the unique Youtube URL and head to that page.

5. Now you are on the actual Youtube Live Stream page for your eventual stream. It looks nearly identical to that of a normal Youtube video page. However, there is the addition of the chat box on the side of the video. From here you will see that you have a Share option once again but unlike normal Youtube video uploads our Embed button is not available. So to remedy this situation we will simply head over to any other regularly uploaded Youtube video and look for the proper code to use.

6. With our embed option not being available, we simply need to find a video that we can view the Share > Embed options on so we can copy that string of code. Once we have that code copied, we can paste it into your WordPress website and then replace that video’s unique URL with that of our own Live stream’s URL.

Preview of code used:

<iframe width="560" height="315" src="https://www.youtube.com/embed/h-SOGcBQtoQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>


7.
 At this point, you can hit preview on your page and you should see your live stream already being displayed on the page you pasted that code. If you do not see the video, the most likely error would be due to an issue with the unique URL being copied/pasted incorrectly.

And thus, we have now embedded a Youtube live stream onto our WordPress website without the use of any plugins. However, we aren’t finished, we have just one more step to left in order to add our chat box as well.


8. In this step you will again be replacing some URL’s within a piece of embedding code.

Here is the code you will need to use:


<iframe width="150px" height="100px" src="https://www.youtube.com/live_chat?v=CUSTOMYOUTUBEURL&amp;embed_domain=YOURWEBSITEDOMAIN.COM"></iframe>


In this piece of code you will use the Youtube Live stream’s custom URL for the first replacement & you will use the domain for the website you are embedding the chat box onto for the second replacement. Above you can see the code blank example and below is how I have it embedded on our website, maxmediacreates.com.

<iframe width="150px" height="100px" src="https://www.youtube.com/live_chat?v=h-SOGcBQtoQ&amp;embed_domain=maxmediacreates.com"></iframe>

After adding that piece of code to your site, you can hit the preview button once again and it should have both the Youtube Live Stream & the stream chat embedded on your website. Now you can through and use shortcodes or whatever method you’d like to move the boxes around, place them side by side, or however you’d like to display them.

I always try to not use unneeded plugins when I can. So when I was unable to find any method of embedding Youtube live streams and specifically embedding stream chat onto my site I went through and found my own method of making it happen.

Finally, I hope this tutorial was thorough enough and not at all confusing for anyone following along at home. I’ve created a video tutorial that can run alongside this text based tutorial to help answer any lingering questions that one might have in regards to any particular steps along the way. 

Please feel free to leave a comment below or send us an email with any additional questions as well!