Skip to main content

Embed YouTube livestream and live chat on your blog or website

So you're planning a live broadcast - that's excellent! Now that your Live event or Hangout on Air is scheduled, you need to promote it.

Note: as of August 2016 you must have monetization enabled and an approved AdSense account linked to your YouTube account to embed the video on your own website. Learn more.


Why embed your livestream video and live chat on your blog?


You can easily share a direct link to your video or Google+ Event, but if you have a blog or website why not point people there instead?  There are some great reasons to do that:

  • People can not only watch your livestream video and live chat, but also leave blog post comments that remain beyond the broadcast
  • You can post supplemental information and links related to your livestream for viewers
  • If you stream using multiple platforms your blog is the place where fans can always find your latest broadcast
  • Your blog is a single home for your content, where people can find your archived broadcasts, other videos and articles



Note: AdSense does not allow ads to be displayed on pages where "dynamic content" such as live chats is the "primary focus". It is probably best to not display AdSense ads on the page while the YouTube live chat is active.  Learn more in the AdSense Help Center

What happens when the livestream is over?

When your livestream ends, YouTube creates an archive of your video which can be watched in the same video player.

The live chat is only available before and during the livestream. Live chats are not archived by YouTube.

How to embed a YouTube livestream video and live chat on your blog

The instructions below are for Blogger, but should work on other blogging platforms and websites.

* How to embed a YouTube livestream video

The embedded video shows the channel art before the Live event.
When visitors click the embedded video they will see a countdown to the event.
(See the live example at the bottom of the page)

1. Create your Hangout on Air or YouTube Live event

YouTube makes it easy to set up your live stream event:

2. Open the livestream video watch page

Open YouTube My Live Events (www.youtube.com/my_live_events) and click the name of the upcoming event to open thse video watch page. Hangouts on Air scheduled as a Google+ Event will also be listed there.

3a. Embed the video in a Blogger blog post

On the video watch page, click the Share icon,  then click the Blogger icon.


A Blogger post edit window will pop up, with the video embedded in the post.

Select which of your blogs to post to. If you don't see the blog you want, you may have to sign out, then sign back in to a different Blogger account.


3b. Alternative: copy the embed code and paste it into a blog post or your website

If you don't have a Blogger blog or want more control over the embedded video player, you can get the embed code as follows:

  1. click the Embed tab
  2. adjust the settings for the embedded player (player size, related videos and other settings)
  3. copy the embed code
  4. create a new blog post and switch to HTML mode (or open your website's HTML editor)
  5. paste the embed code into your post or website and save the changes

>> Learn more about YouTube embedded player parameters <<

4. Publish your blog post

Before the broadcast starts: when visitors click the play button, then will see a countdown to the scheduled live event.

After the broadcast is over: visitors will be able to watch the archive video of the live broadcast


If you want to also embed the live chat, read on.

* How to embed a YouTube live chat


To comment as a different channel, switch identities on YouTube
(See the live example at the bottom of the page)

Note: AdSense does not allow ads to be displayed on pages where "dynamic content" such as live chats is the "primary focus". It is probably best to not display AdSense ads on the page while the YouTube live chat is active. Learn more about ad placement policies in the AdSense Help Center.

Embedding YouTube live chat on your website is bit trickier than embedding a video as it requires manual HTML editing.

The live chat URL:

https://www.youtube.com/live_chat?v=<your video ID>&embed_domain=<your blog domain>

You need to customize the URL with your video ID and blog domain, then create an iframe to display the chat. The easiest way to do that is to first add the video embed code and then modify that to embed the chat.

1. Open your blog post with the video embed code and switch to HTML mode

I don't recommend editing the HTML in Microsoft Office or other word processor as that can add extraneous code.

2. Find the live broadcast video ID from the video embed code

The video embed code looks like this (video ID is highlighted):

<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/embed/ObGlJ4q5y_w" width="480"></iframe><br />

The video ID is also the last part of the video URL:
https://www.youtube.com/watch?v=ObGlJ4q5y_w

The video ID in this example is ObGlJ4q5y_w

3. Find the domain of blog or website where the live chat will be embedded

The domain is the root URL of your blog or website, without any / or other characters.

For example, here is a link to this post:

http://www.peggyktc.com/2016/05/embed-livestream-and-chat.html

The domain in this example is www.peggyktc.com

4. Construct the live chat URL

Replace <your video ID> and <your blog domain> with the actual video ID and domain.

https://www.youtube.com/live_chat?v=<your video ID>&embed_domain=<your blog domain>

In the example here the URL would be:

https://www.youtube.com/live_chat?v=ObGlJ4q5y_w&embed_domain=www.peggyktc.com

Note: be sure not to add any spaces or extra characters!

5. Create an iframe using the video embed code as an example

You can use the same iframe code for the video and chat, as long as you replace the embedded video URL with the live chat URL.

- Paste a copy of the video embed code into your post

Example of video embed code with the video URL highlighted:

<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/embed/ObGlJ4q5y_w" width="480"></iframe><br />

- Replace the video URL with the live chat URL

Note: do not delete the quote marks " " and make sure you do not introduce any spaces or extra characters!

Example with the live chat URL inserted:

<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/live_chat?v=ObGlJ4q5y_w&embed_domain=www.peggyktc.com" width="480"></iframe><br />

You can adjust the iframe parameters such has height and width to make the chat box larger or smaller.

6. Publish your post


The embedded live chat will not display when previewing your blog post. Double check the published post to make sure it posted properly.

Note that the live chat will disappear once the Live Event is over.

>> Learn more about YouTube Live Chat <<
>> Learn more about embedding YouTube Live chat <<

* How to embed non-YouTube livestream videos


There are number of alternatives to YouTube for live broadcasting. Most offer an option to embed the video on your own website. The notable exception is Periscope.

* How does the embedded video and chat look?

Embedded video



                                Click the video to see the countdown to the live event.

Embedded live chat




If you are viewing this while signed in to YouTube, you should see your channel icon next to the text entry box. To comment as a different channel, switch identities on YouTube

Comments

  1. Nice write up Peggy. Too bad the chat can't be saved.

    ReplyDelete
  2. Thanks Peggy! That was a very useful tutorial! I'm coding a HTML page now with iframes :)

    ReplyDelete
  3. Hey Peggy, great post. I however can't get the chat working. Do you place the iframe into the post? My iframe looks as follows, which is different to yours.

    <... width="560" height="315" src="https://www.youtube.com/live_chat?v=WptfsYZo1lc&embed_domain=justmarriedlive.com" frameborder="0" allowfullscreen>

    The three dots = iframe (otherwise i wouldnt be able to post this comment). The width & height was provided by YouTube for the initial video and there was no
    at the end. My website does not have www. but just http://justmarriedlive.com. Could these be the issues? I've tried multiple options but can't seem to get it working.


    Thanks!

    ReplyDelete
    Replies
    1. Hi Julien, the iframe should be placed in the post in HTML mode

      It looks like you have the right format:
      https://www.youtube.com/live_chat?v=&embed_domain=

      (Don't forget to put the closing /iframe tag at the end)

      Do you see anything where you have placed the iframe? An error message?

      I wouldn't think not having the www would make a difference.

      Delete
  4. Hi Peggy,

    thanks for good tips.
    i followed the instructions, but i didnt manage to make it work.
    i get a blank frame on the webpage, but no chat interface.

    maybe i am doing something wrong???

    thanks :-)
    Aharale

    ReplyDelete
  5. dear I can not embed youtube live chat into my blogger please show me why ? thanks !

    ReplyDelete
    Replies
    1. Did you follow the instructions exactly to create the embed code for the live chat?
      Note that the chat will only appear while your video is live.

      Delete
  6. Very nice information. Thanks for it.

    ReplyDelete
  7. Replies
    1. Beitra: what do you mean when you say it's not working? Did you try it and it doesn't work for you?

      Delete
  8. Thanks for this tutorial! Great job at breaking everything down.

    1. When you embed the live chat, YouTube displays a message to users: LOGIN TO CHAT

    2. When they login - they are redirected to YouTube instead of my live chat page defeating the purpose of the embed. LOL

    Do you have a redirect code for a simple fix?

    Thanks!
    Kit

    ReplyDelete
  9. Hi, Peggy, nicely detailed. Question:
    1. Do you know if it is possible, to embed & run your broadcast via your own site though not have it available to view on YouTube?
    Or
    2. Is there a means to restrict viewing of the live boadcast to selevt groups?

    Thanks,
    John.

    ReplyDelete
    Replies
    1. John: apologies for the late reply.
      1. You can run an unlisted live stream. Unlisted videos are visible to anyone with the direct link to the video and when you embed it on your site.

      It's not really secure if you are concerned about sharing, because people can get the link from the embedded video. However, that does prevent people who are browsing your channel from seeing it.

      2. You can also make your live broadcast private. Private videos can be shared with specific people via their email address. That works if you only want a limited group to be able to see it.

      Learn about the privacy options here:
      https://support.google.com/youtube/answer/157177

      Delete
  10. Hi Peggy K
    I get an error when i embed live chat.
    Please help me.

    Uncaught DOMException: Blocked a frame with origin "https://www.youtube.com" from accessing a cross-origin frame.
    at HTMLElement._listen (https://www.youtube.com/yts/jsbin/live_chat_polymer-vflCyWEBP/live_chat_polymer.js:189:126)
    at HTMLElement.Polymer.Base._listen (https://www.youtube.com/yts/jsbin/live_chat_polymer-vflCyWEBP/live_chat_polymer.js:2766:14)
    at HTMLElement.listen (https://www.youtube.com/yts/jsbin/live_chat_polymer-vflCyWEBP/live_chat_polymer.js:164:6)
    at HTMLElement.attached (https://www.youtube.com/yts/jsbin/live_chat_polymer-vflCyWEBP/live_chat_polymer.js:3364:176)
    at Array. (https://www.youtube.com/yts/jsbin/live_chat_polymer-vflCyWEBP/live_chat_polymer.js:14:398)
    at Object._makeReady (https://www.youtube.com/yts/jsbin/live_chat_polymer-vflCyWEBP/live_chat_polymer.js:8:222)
    at https://www.youtube.com/yts/jsbin/live_chat_polymer-vflCyWEBP/live_chat_polymer.js:8:328
    at https://www.youtube.com/yts/jsbin/web-animations-next-lite.min-vflqEtsI7/web-animations-next-lite.min.js:19:152

    ReplyDelete
  11. i was able to embed my stream with iframe

    ReplyDelete
  12. Hello! Please Help me Peggy. I add youtube livechat in my blog after 3 day 500 Internal Server Error . How to handle this problem?

    ReplyDelete
  13. Hi, If i want to redirect to my existing site on sign in for live chatting then, do you have any idea ?

    ReplyDelete
    Replies
    1. Hi Unknown: where do you want to redirect from exactly? You cannot redirect from YouTube Live chat.

      Delete
  14. This is an impressive attempt to let readers know how live chat software integration can assist during live streams.

    By incorporating the software, the one conducting the livestream can easily answer customer queries. This does work in the favor for everyone.

    I also appreciate how the writer goes on to let its readers know how video and live chat software can be embedded in a blog. The steps are easy to follow. Would appreciate if I get to see more how to write-ups in future. Keep up the good work.

    ReplyDelete
  15. Thanks for these great instructions.

    The live chat embed only works when I view the page where I have it embedded while logged into the Google Account that owns the video stream.

    Every other user can't see the chat, it's just blank. Also, as the owner of the video, If I go to the embedded page under an incognito window in chrome, I cannot see the chat box.

    I have chat enabled, and I have an adsense account tied to my YouTube Account.

    ReplyDelete
    Replies
    1. Yap! :/

      Unfortunately it means that for Mobile devices chat is invisible as well.

      How I tested - thats for iOS Safari and Chrome in iPhone 7.

      Delete
    2. Chat is invisible for mobile devices as well.

      I tested it on Iphone7
      iOS Safari
      and Google Chrome with my profile signed in.

      Delete
  16. Michael: Is your scheduled live event set to private? Private live streams will only be visible to you and to the people you have shared with directly. I just updated the example in the post so that it's a future unlisted live stream. That is visible to me, even if I'm using an incognito window. So that is an alternative option.

    ReplyDelete
  17. Hello piggy,

    Everything works perfectly, except in the cell phone, even with the transmission being published, could you tell me what happens in this case?

    Thanks!

    ReplyDelete

  18. Hello peggy,

    Everything works perfectly, except in the cell phone, even with the transmission being published, could you tell me what happens in this case?

    Thanks!

    ReplyDelete
    Replies
    1. Tecnico Cenacoaching: as best I can tell, the live chat embed doesn't work on mobile devices. Your viewers would do better to use the official YouTube app for the live chat on their phones. Sorry I don't have any suggestions for that.

      Delete
  19. Correcting:

    Sorry for the repeated messages, but the sample chat of your page does not appear on the mobile either

    ReplyDelete
  20. My adsense this month earnings are 27$ and lifetime balance is 19$ (since 2016) but i don't want to use Adsense anymore if i cancel my adsense account will i receive a total of 46$ orelse only 19$ and my old YouTube channel has 10k subscribers but adsense disabled Before 3 years back is there any way to get re-enable.

    ReplyDelete
  21. sir i need help
    i do live events. but i don't know how to creates link
    actually my friend doing that work he uploading live event to YouTube and posting blog and he giving like this link[ http://santoshwedsalankrita.blogspot.in/p/blog-page.html]
    can u tell me how can he doing
    please
    when i uploading event automatically playing in this link please help me

    ReplyDelete
  22. PRASANA KUMAR CHIKKA: if you cancel your AdSense account, you should be paid your finalized earnings (which you can see on your Payments page) within 90 days. So it depends on that amount. Learn more here: https://support.google.com/adsense/answer/9914

    ReplyDelete
  23. You might have just saved my life with this tutorial, but I have a small problem: The embedded live chat doesn't appear when I open the page via mobile. Did you also have this issue?

    ReplyDelete
    Replies
    1. I haven't checked, but it may be that the embedded chat isn't compatible with mobile browsers, unfortunately. For mobile visitors you can give people the link to your video's watch page on YouTube, and they can join the chat in the YouTube app.

      Delete
  24. Live streaming is the latest fad on social media so make sure to get live with your audience from time to

    time.
    Live streaming would give you a more intimate space with your viewers and encourage them to interact with

    you more often. It would allow more personal interaction with your audience in real time.
    You can also share your live videos later, so that those who have missed out the live streaming can view

    them again. A tour of your business, a demonstration of your products or an interview with the creators

    are some of the possible content which can be created with a live video.
    Make sure to make the most out of the apps which allows you to go live directly from the blog.

    ReplyDelete
  25. hi all,

    Is there anyway after the user google authentication redirected back to the previous than continuing at the Youtube channel page?

    ReplyDelete
    Replies
    1. Hi sybil: Do you mean if someone isn't signed into their account, then signs in on your web page? I don't think there is any way to control that.

      Delete
  26. I have a question i want to add embed cricket live streaming on my google adsense website http://bit.ly/2vzeLzX.

    ReplyDelete
  27. live chat not working

    ReplyDelete
    Replies
    1. Can you share more details about what exactly isn't working?

      Delete
  28. You might have just saved my life with this tutorial, but I have a small problem: The embedded live chat doesn't appear when I open the page via mobile. Did you also have this issue?

    ReplyDelete
    Replies
    1. I have noticed that issue. I'm not sure why it doesn't seem to work in mobile browsers. It's probably worth linking to the video, in addition to having the embed, so people can live chat using the YouTube app on mobile.

      Delete
  29. without chat.. and with +80% mobile users.. embed youtube livestream is worthless

    ReplyDelete
  30. Hi,

    I am using your tutorial for getting live stream Chat in android app but not able to get it, please guide me. Thanks in advance.

    ReplyDelete
    Replies
    1. Hi Bright. This only works on desktop at this time.

      Delete
  31. How do I get the Video ID to be the Channel ID, the video Id changes every time and it doesn't work for the next live stream? help please!

    ReplyDelete
    Replies
    1. You can embed a playlist with the current live stream the default video, by setting it so the most recently added video is always at the top of the list.

      Delete
  32. Hi Peggy,

    Thanks for this post. It has been super helpful during the last number of months, as I have been helping many local arts organizations to be able to host virtual events, films screenings, etc, throughout the pandemic!

    The code you provide seems to work great on most basic sites and WordPress sites, however YouTube "refuses to connect" the chat for some reason on both Wix and Weebly sites that I have been trying to get to work!

    Here's a post I made in the Weebly Community with a bit more info: https://community.weebly.com/t5/Site-Editor/Embed-Issue-Twitch-Stream-amp-YouTube-Chat-code/m-p/203640#M38854

    If you have any suggestions that would be a huge help. I am so disappointed in YouTube and their efforts to make the chat embedding so difficult and also more recently to limit that ability of new YouTube accounts to be able to live stream at all!

    If you have any suggestions that would be so incredibly helpful!

    thanks,

    -Aaron

    ReplyDelete
    Replies
    1. Hi Aaron, I'm sorry to hear it's not working on Wix or Weebly sites. I haven't used those myself, so I can't give any specific suggestions. It may be as the person in your Weebly forum thread suggested that it's an issue on their end.

      One thing you might look into is how those sites handle iframe content in general, as that may be the issue.

      Delete
  33. Hi Peggy,

    Thank you for this wonderful blog. I used your live chat embed example but it doesn't work, I also noticed that the sample live chat embed above ^^ (below the embed video sample) that you provided no longer works and says "Refused to connect". Does this mean that this is no longer working?

    thanks,

    lila.

    ReplyDelete
    Replies
    1. It should still work. The problem is that the chat expires after the live stream is over. So I need to replace that with a new upcoming example.

      Delete
    2. I tried it a couple of times while my stream (and other people's stream) is live, yet it seems that it is still broken. hmmmm.

      Delete
  34. Hi Peggy, I am also experiencing the same issue with "www.youtube.com refused to connect".
    I used to embed youtube chats in my own portal for months. Since two weeks, I start to have this error message and, while searching for solutions, I came across your tutorial.

    The error shown in your page "www.youtube.com refused to connect" is not related with expired chat.
    As a verification, if you open the chat ID 7Jy9ffl7LPE associated to your example as a new pop up page (so not from your domain), the page loads perfectly :
    https://www.youtube.com/live_chat?is_popout=1&v=7Jy9ffl7LPE

    I suspect a change in the authorisations at youtube.com.
    I hope somebody will be able to explain the issue and provide a solution.

    Emanuele

    ReplyDelete
  35. Hi Peggy, I am also experiencing the same issue with "www.youtube.com refused to connect".
    I used to embed youtube chats in my own portal for months. Since two weeks, I start to have this error message and, while searching for solutions, I came across your tutorial.

    The error shown in your page "www.youtube.com refused to connect" is not related with expired chat.
    As a verification, if you open the chat ID 7Jy9ffl7LPE associated to your example as a new pop up page (so not from your domain), the page loads perfectly :
    https://www.youtube.com/live_chat?is_popout=1&v=7Jy9ffl7LPE

    I suspect a change in the authorisations at youtube.com.
    I hope somebody will be able to explain the issue and provide a solution.

    Emanuele

    ReplyDelete
  36. I came across this portal because I am also experiencing some issue with youtube chats impossible to embed anymore.
    It is not a matter of chat expired. When you open as a separate new pop up you do not have any issue https://www.youtube.com/live_chat?is_popout=1&v=7Jy9ffl7LPE

    I suspect a change at youtube.com.

    I hope somebody has an answer and a solution to this unexpected issue.

    Thanks, Emanuele

    ReplyDelete

Post a Comment

Spam and personal attacks are not allowed. Any comment may be removed at my own discretion ~ Peggy