From Peggy K - *Embedding HOA or YouTube Livestream/Live Chat on blogs/websites.

From Peggy K - *Embedding HOA or YouTube Livestream/Live Chat on blogs/websites.

Originally shared by Peggy K

Embed a Hangout on Air or YouTube livestream and live chat on your blog or website

Point your fans and followers to your website or blog to view your latest live broadcast. You can now include live chat as well!

Embed an upcoming livestream video on your blog or website

The embedded video will display your channel's channel art header as the thumbnail. When a visitor clicks the play button, they will see the countdown to the live event.

1. Schedule your livestream at YouTube Live Events (www.youtube.com/my_live_events) or set up a Hangout on Air Event on Google+

2. Open the video watch page, using the link on My Live Events in YouTube or your Google+ Event

3. Under the video click Share > Blogger to create a Blogger blog post.

If you don't have a Blogger blog click Share > Embed to get the embed code.

4. Once the embed code is added to your blog post or website, publish.

Embed a YouTube Live chat on your blog or website

Note that the live chat is only available until the event is over.

Your chat identity will be the channel you are signed into at www.youtube.com, which may not be the same as your Blogger or main Google identity.

>> AdSense does not allow ads on pages with dynamic content like live chats. You should disable AdSense ads on the page with the embedded live chat while the chat is live. <<

To embed the live chat you need to construct the embed URL. It's easiest to do that if you have already embedded the video in the post or page!

1. Open the post with the embedded livestream video and switch to HTML mode

2. Find the video ID of the livestream video
(that is the last part of the video URL)

3. Find your blog's domain
(no slashes or http: just a plain domain like www.peggyktc.com)

4. Construct the live chat URL

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

Replace with the video ID
Replace with your blog's domain

5. Create an iframe

For example:



Replace with the URL you constructed in step 4.

Make sure you don't introduce any spaces or new characters into the URL.

6. Publish your blog post with the embedded live chat URL

Full instructions and example on my blog:

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