How to seamlessly integrate your YouTube live stream into your Hub using iFrames
🧰 What You Will Need
1. Membership.io Grow plan or higher
2. A verified YouTube account
3. Code for the YouTube live stream
Good news! You can seamlessly integrate YouTube live streams into your Hub, creating a more engaging and interactive experience for your audience. NOTE: To make this work, you'll need to connect your YouTube channel with your Membership.io account. Once that's set up, let's dive in!
Step 1 - Enable live streaming on YouTube
Head to your YouTube studio page. Find the Create button in the top right corner and click on it, then select Go Live.
Step 2 - Request access to streaming
Next, ⚠️ a pop-up warning will prompt you to request streaming access. Click Request and follow the verification steps for your channel. NOTE: You may need to wait up to 24 hours for live streaming to be activated.
Step 3 - Embed an existing YouTube live stream
Once you have streaming access to your channel, follow Step 1 to begin your live session.
Then, you'll see two options appear: start a stream now or schedule for later. Click Start next to the Right Now option to start streaming right away.
Next, you'll see two new options: Built-in webcam and Streaming software. Click on Go next to the Built-in webcam option. Please make sure to allow access to your camera and microphone.
Enter the title, description, and privacy settings of your video on the next screen. Provide additional details on the Details page. Click Next and adjust settings to customize your stream on the Customization page. Then click Next and select the time to begin streaming on the Visibility page.
Once you're happy with your settings, select the desired time to start your live session and then click Done. A preview window of the stream will appear, showing a summary of your video alongside a live chat window. Click Go Live to start streaming.
NOTE: Only public YouTube content will be added to the Membership.io Library, private and unlisted content cannot be imported due to privacy restrictions.
Step 4 - Copy the code of your YouTube live-stream video
Once your stream is live, click the Share button. Then click the video link that pops up to go to the live streaming page.
Click the Share button on this page, and a window will open with the option to embed.
Click the Embed button and copy the code from the window that appears.
Step 5 - Open your Hub page
Head to the Hubs tab in your Membership.io account, and open the Hub Editor for the specific Hub where you want to embed the code.
Step 6 - Create a Layout Section and add an Embed Code element
You can create a new Layout Section or utilize an existing one in your Hub to embed live video. In the Hub editor, select the page where you want to add a Layout Section.
Create the section type you want on the Sections page.
A new page should appear with your selection. Click on ➕ Add Element to open the options on the left sidebar where you'll find the Embed Code element. Click on Embed Code.
Step 7 - Paste your Embed Code that includes an iFrame
Next, click the Import Code button to paste your YouTube embed code (from Step 4) into the element. Hit Confirm to apply your changes.
❗️NOTE❗️
The Embed Code element in your Hub will only accept HTML code with <iframe> tags that include a source URL attribute. You will not be able to add other types of code to this element. Our support team can only help with troubleshooting when valid iframe code isn't working as expected.
Step 8 - Preview your new Youtube Live content
Make sure to save your changes to preview your new live video from your Hub's homepage. 🎥
Tips:
- Test the live stream embedded in preview mode to make sure it works correctly.
- Notify your audience in advance about upcoming live events in your Hub.
Happy streaming! If you run into a snag, just give our friendly support team a shout at help@membership.io for assistance 🙂
📚 Up Next