html - How to embed youtube livestream chat

Question

I'm trying to embed a youtube livestream chat onto a webpage on my website,

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

I'm trying this, but the chat doesn't show up at all, if tried doing embeded domain using a real domain I own, but that doesn't work either.

Answer 1

It seems to me that YouTube disabled the feature to embed a live chat on external websites, but then forgot to update the documentation. Or alternatively, there could be an unfixed bug that broke this feature.

Details

The YouTube knowledge base still says that embedding a live chat iframe into an external website is still possible, using a URL like the one you posted (see here, in section "Embed Live chat").

However, when trying that and looking into the browser's console, you will see a message like this:

Refused to display 'https://www.youtube.com/live_chat?v=12345&embed_domain=example.com' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

You can also see that x-frame-options: SAMEORIGIN header in the "Network" tab of the browser's developer tools when looking at the response to the https://www.youtube.com/live_chat?… request.

This means that YouTube does not want a browser to embed this into an iframe except when embedded on youtube.com itself. (On YouTube itself, this embed code still works: when you inspect the source code of any currently streaming live video on YouTube, you will find that the live chat window there is made with that same /live_chat?… request, in an iframe.)

Additional indications that this feature has been removed:

• The YouTube documentation mentions:

  The Live chat module only exists on the YouTube watch pages — it does not follow embedded players. (source)

  I believe that's the new part of the documentation, and the section "Embed live chat" further down is outdated.

• This tutorial from 2016 uses the documented URL format to embed an example live chat near the bottom, and it now shows the same "Refused to display […] in a frame because it set 'X-Frame-Options' to 'sameorigin'." Assuming that this worked in 2016, something must have changed on YouTube's side.

• This Reddit thread tells how somebody's embedded live chat suddenly stopped working in early September 2018 – so shortly before this question got asked.

Alternatives

• You could use the YouTube Livestream API, in particular the LiveChatMessages endpoint, to get and create chat messages. There are probably open source libraries around to help with this. So far, I found this one (able to display but not create chat messages).

• You could embed your own chat, either installed on your own server or a cloud-hosted livestream chat solution. This solution can also provide features that YouTube live chat does not provide, such as allowing anonymous visitors to post.

• You could reverse proxy the https://www.youtube.com/live_chat?… URL, forwarding YouTube's response but with the X-Frame-Options header removed.

• If you only need a solution for one or a few computers, you could use a browser extension to remove the X-Frame-Options header from YouTube's response. See this question.