To embed a live stream with its chat, you'll need to use two separate HTML <iframe> elements. One iframe will display the video, and the other will display the chat.
Step 1: Get the Video Embed Code
First, you need the standard embed code for the live stream video. This code is generated directly by YouTube.
Go to your live stream's page on YouTube.
Click the Share button.
Select the Embed option.
Copy the entire block of code that appears. It will look similar to this:
HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Step 2: Create the Chat Embed Code
Next, you need to manually create the <iframe> for the live chat. This code is separate from the video embed code. The key is to use the correct URL format and to include your website's domain for security.
The chat iframe will look like this:
HTML
<iframe width="350" height="500" src="https://www.youtube.com/live_chat?v=YOUR_VIDEO_ID&embed_domain=app.teachfloor.com" frameborder="0"></iframe>
Important:
You must replace YOUR_VIDEO_ID with the unique ID of your specific live stream. You can find this ID in the URL of your video, right after v=.
The embed_domain parameter is crucial for security. Make sure to set it to your website's domain: app.teachfloor.com.
Step 3: Combine Both Codes on Your Page
Finally, paste both <iframe> blocks into the HTML of your webpage. You can place them side by side or one above the other to adjust the layout.
HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe width="350" height="500" src="https://www.youtube.com/live_chat?v=YOUR_VIDEO_ID&embed_domain=app.teachfloor.com" frameborder="0"></iframe>
Customizing Width and Height:
Remember, you can adjust the width and height attributes of both <iframe> elements to fit your website's design. The width of the chat is typically smaller than the video player for a balanced layout.