Embed your YouTube live video in your Hub with iFrames

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.

Frame 60-4

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.

Frame 57-Nov-17-2023-05-54-43-5284-PM

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.

Frame 57-Nov-17-2023-06-50-15-2873-PM

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.

Frame 58-4

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.

Frame 59-Nov-17-2023-06-59-56-6391-PM

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.

Frame 61-4

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. 

Frame 62-4

Click the Share button on this page, and a window will open with the option to embed. 

Frame 63-4

Click the Embed button and copy the code from the window that appears.

Frame 64-4

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.

Click Customize Hub

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.

Select from Custom Pages


Create the section type you want on the Sections page. 

New section created


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.

Add element to section


Choose element to add

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. 

Paste embed code and confirm

 

❗️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. 🎥 

Preview the video and save


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 🙂