Monday, May 16, 2016

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.

Also see:  Embed your Stream Now livestream without having to update the video link for each broadcast.

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 <<
>>&nbsp/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




The video shows the channel header art by default. 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



Posted by Peggy K

4 comments:

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

    ReplyDelete
  2. 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
  3. 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