Embed YouTube live videos on Bettermode

Embed YouTube Live Videos on Bettermode

Embedding a YouTube live video and its live chat into Bettermode enhances engagement by allowing your audience to participate in events directly within your site without leaving the page. This guide walks you through the complete process.

Part 1: Get the Embed Code from YouTube

To embed a YouTube live video, you need to obtain its embed code. Follow these steps:

1. 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
2. Locate the video
   • Go to your channel's live stream page or find the specific live video you want to share
   • Right-click on the video or click the Share button beneath the video player
3. Select and copy the embed code
   • Click the Embed option from the Share menu
   • Copy the generated code

Part 2: Embed the Video in Bettermode

1. Set up the space for the YouTube live video
   • Log in as an Admin and create a new space or navigate to an existing space where you want to host the live video
   • Go to the Design Studio and customize the space
   • Add a Section block
   • Configure the section layout—this guide uses a 2:1 layout for the live video (column 1) and live chat (column 2)
2. Add the YouTube video embed
   • Expand Column 1
   • Add an HTML Script block
   • Paste the YouTube live video embed code you copied from YouTube
   • Click Save
   • Optional: Remove the card padding around the video by selecting None in the Wrapper field

Part 3: Embed the YouTube Live Chat

1. Get your video ID
   • Open your YouTube live stream URL or go to YouTube Studio and open your live stream
   • Click the Share button below the video
   • Select Embed from the options
   • Find the video ID in the embed code—it's the alphanumeric value after v= in the URL
2. Prepare the live chat embed code
   • Use this code template:
     
     Copy

     <iframe src="https://www.youtube.com/live_chat?v=[VIDEO_ID]&embed_domain=[YOUR_DOMAIN]" height="500" width="100%" frameborder="0"></iframe>

   • Replace [VIDEO_ID] with your live stream's YouTube video ID (found after ?v= in your stream URL)
   • Replace [YOUR_DOMAIN] with your domain name (the domain where you're hosting the embed)
   • Example:
     
     Copy

     <iframe src="https://www.youtube.com/live_chat?v=jfKfPfyJRdk&embed_domain=demo.bettermode.io" height="500" width="100%" frameborder="0"></iframe>

3. Add the chat to your space
   • In your space's Design Studio, expand Column 2
   • Add an HTML Script block
   • Paste your edited live chat code (with your video ID and domain)
   • Click Save
   • Optional: Remove the card padding by selecting None in the Wrapper field
   • Click Save Changes
4. Customize and preview
   • Adjust the width and height of the iframe to match your design
   • Preview the page to verify both the live video and chat are working

Troubleshooting

The Live Stream or Chat Does Not Appear

• Verify you've correctly replaced [VIDEO_ID] and [YOUR_DOMAIN] in the iframe URLs with your actual values
• Confirm your YouTube live stream is active and not in "scheduled" mode—embeds may not display for upcoming streams
• Ensure the domain name in the chat embed matches the domain where the iframe is being hosted

The Chat Box Does Not Load

• Check that live chat is enabled for your stream in your YouTube live settings
• Verify your browser is not blocking third-party cookies, which could prevent the chat from loading

Related Articles

• Host Live Stream Events in Bettermode with StreamYard
• Embed Twitch Live Streams into Bettermode