Embedding a YouTube live video and its live chat into Bettermode can enhance engagement, allowing users to participate in events directly within your site. It is a great way to engage your audience directly on your site. This guide walks you through embedding both the YouTube Live video and the accompanying live chat onto your site.
By following these steps, you can keep your audience connected and interacting with your content without requiring them to leave your site.
Part 1: Get the Embed Code from YouTube
To embed a YouTube live video, you'll need the embed code of the stream. Here's how to get it:
Start your live stream on YouTube:
Go to your YouTube channel's Creator Studio.
Navigate to the Live Control Room and start your live stream.
Locate the video:
Go to your channel's live stream page. Alternatively, find the Live video that you would like to share.
Right-click on the video or click the Share button beneath the video player.
Select "Embed":
After clicking "Share," choose the Embed option.
Copy the code.
Part 2: Embed the Video in Bettermode
Set up the space for the YouTube Live.
Log in as an Admin and create a new space or navigate to an existing space where you’d like to host the live video.
Customize the space in the Design Studio.
Add a Section block
Configure the section block to your preference. In this article, we will be using the 2:1 layout for the live video and the video chat.
Insert the YouTube Video embed code.
Expand Column 1 and add a HTML Script block.
Paste the YouTube live video code and click Save.
To remove the card and padding around the video, select None under the Wrapper field.
Set up a section for the live chat.
Go back and open Column 2.
Add another HTML Script block.
Paste the following code into the HTML Script block:
<iframe src="<https://www.youtube.com/live_chat?v=[VIDEO_ID]&embed_domain=[YOUR_DOMAIN/SUBDOMAIN]>" height="500" width="100%" frameborder="0"></iframe>Click Save and remove the wrapper (optional).
Click on Save Changes.
Part 3: Embedding the YouTube Live Chat
Fill in the Live chat code (provided above).
Go to your YouTube Live stream URL or YouTube Studio and open the live stream.
Find the video ID.
Below the video, click the Share button, just like for the video.
Select Embed from the options.
Copy the video ID. This is an alphanumeric value at the end of the Share URL:
Replace
[VIDEO_ID]with your live stream’s YouTube video ID and[YOUR_DOMAIN]with your domain name (the site that URL that will be hosting the embed). The video ID can be found in the URL of your live stream, after?v=. Here is an example:<iframe src="<https://www.youtube.com/live_chat?v=jfKfPfyJRdk&embed_domain=demo.bettermode.io>" height="500" width="100%" frameborder="0"></iframe>
Paste the Live Chat Embed Code:
Go back to the space in Bettermode and edit the HTML block in column 2
Paste the edited live chat code with your video ID and domain/subdomain.
Customize the width and height of the iframe to suit your design.
Click Save Changes and Preview:
Save your changes and preview the webpage to ensure the live chat is working alongside the video.
Troubleshooting
1. The Live Stream or Chat Does Not Appear:
Ensure you’ve correctly replaced the
[YOUR_CHANNEL_ID]and[YOUR_VIDEO_ID]values in the iframe URLs.Ensure that your YouTube live stream is active and not in "scheduled" mode, as embeds may not display for upcoming streams.
Make sure that the domain name used in the chat embed (
[YOUR_DOMAIN]) matches the domain where the iframe is being embedded.
2. The Chat Box Does Not Load:
Check if live chat is enabled for your live stream in YouTube settings.
Verify that your browser is not blocking third-party cookies, which could affect the live chat embed.