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><br /> 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

This appears to have to do with the introduction of this change to iframes, at least when I had this issue.

To fix this, I would suggest the use of a script like the following:

<script>  
 let frame = document.createElement("iframe");  
 frame.referrerPolicy = "origin";  
 frame.src = "https://www.youtube.com/live_chat?v=VIDEO_ID&embed_domain=" + window.location.hostname;  
 frame.frameBorder = "0";  
 frame.id = "chat-embed";  
 let wrapper = document.getElementById("chat-embed-wrapper");  
 wrapper.appendChild(frame); 
</script>

Where chat-embed-wrapper is the parent of the iframe with the id chat-embed and VIDEO_ID (in the frame.src assignment) is the id of your target video. You'll have to modify this a little for your setup, but this is the general case solution.