CODEWITHSUNDEEP
htmlyoutube
Eeeek
Eeeek

Reputation: 1

How to fix youtube live chat in HTML

I'm new to code and I want to implement a code that puts the youtube live chat onto the page. Right now it is refusing to connect.

Here is my code:

<html>
    <head> 
        <link href="style.css" rel="stylesheet" type="text/css"> 
    </head>
    <body>
        <iframe id="pewdiepie" height="80px" width="300px" frameborder="0" src= "https://akshatmittal.com/youtube-realtime/embed/#!/UCq-Fj5jknLsUf-MWSy4_brA" style="border: 0; width:300px; height:80px; background-color: transparent;"></iframe>
        <p>
        <iframe id="tseries" height="80px" width="300px" frameborder="0" src="https://akshatmittal.com/youtube-realtime/embed/#!/UC-lHJZR3Gqxm24_Vd_AJ5Yw" style="border: 0; width:300px; height:80px; background-color: transparent;"></iframe>
        <p>
        <iframe height="500" width="300" src="https://www.youtube.com/live_chat?v=UVxU2HzPGug&embed_domain=<MY_IP>" style="border: 0; width:300px; height:100px; background-color: transparent;"></iframe>
    </body>
</html>

Is there anything wrong with the code? And how I can fix it? By the way I hid my IP address.

Upvotes: 0

Views: 3439

Answers (2)

Bud Damyanov
Bud Damyanov

Reputation: 31839

The only way I found to circumvent the "X-Frame-Options: sameorigin" limitation is to embed the live chat via JavaScript:

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

The chat-container is the parent HTML element of the chat embed. Make sure that you change the video to the correct link and/or remove the regular iframe.

Upvotes: 0

Maxime
Maxime

Reputation: 868

To embed a youtube live chat, the link must be like this:

"https://www.youtube.com/live_chat?v=<id_video>&embed_domain=<your_domain>"

So, to embed your chat on stackoverflow, it will be:

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

EDIT :

Here is the official documentation from google.

During a live stream, you can embed live chat on your own side by using an iframe.

Get the video ID for the live stream. You can get the video ID from the watch page URL (youtube.com/watch?v=12345). In this case, the video ID is ‘12345’.

If you chose "Stream now," right-click on the player and select Copy video URL to get the video URL.

Get the domain URL for the site you want to embed chat on. If you're embedding chat on www.example.com/youtube_chat, your embedding domain is "www.example.com."

Combine the embedded URL in the following way: https://www.youtube.com/live_chat?v=12345&embed_domain=www.example.com.

This is the URL for your iframe. Note the embed_domain must match the the URL of the page you’re embedding the chat on. If they are different, the embedded chat will not load.

Upvotes: 1

Related Questions