> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed YouTube Live Stream in Gutenberg

Step-by-step guide to embed YouTube Live Stream in Gutenberg using the Custom iFrame WordPress plugin. Stream webinars and events. No coding required.


## Overview

Custom iFrame lets you embed YouTube Live Stream in Gutenberg by pasting the live stream URL into the block. Visitors watch the stream directly on your page without leaving your site.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Elementor instead? Follow the [Embed YouTube Live Stream in Elementor](/elementor/video/embed-youtube-live) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A YouTube live stream URL or embed link

## Step 1: Get the YouTube Live Stream URL

<Steps>
  <Step title="Open YouTube and find the live stream" icon="radio" title-type="p">
    Go to [youtube.com](https://www.youtube.com) and open the live stream you want to embed.
  </Step>
  <Step title="Copy the link" icon="link" title-type="p">
    Click the **Share** button on the live stream. Click **Copy Link** to copy the watch URL.

    For the embed URL format, click **Share** - **Embed** and copy only the `src` value from the iFrame code (e.g. `https://www.youtube.com/embed/VIDEO_ID`). Either format works in Custom iFrame.
  </Step>
</Steps>

## Step 2: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the live stream. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 3: Embed YouTube Live Stream in Gutenberg

<Steps>
  <Step title="Select YouTube as the source type" icon="youtube" title-type="p">
    Select the Custom iFrame block. In the right panel, find **Source Type** and select **YouTube**.
  </Step>
  <Step title="Paste the live stream URL" icon="clipboard" title-type="p">
    Paste the live stream URL into the **Source URL** field. The stream player appears inside the block in the editor.
  </Step>
  <Step title="Set height and publish" icon="check" title-type="p">
    Set **Height** to 450px or more for a 16:9 stream. Click **Update** or **Publish**.
  </Step>
</Steps>

## Step 4: Configure Advanced Playback (Pro)

<Callout kind="info">
  The options below require Custom iFrame Pro (Starter, Studio, or Agency plan). [View pricing](https://customiframe.com/pricing) — plans start at $29 one-time.
</Callout>

**Autoplay:** Start the stream automatically. Enable **Mute** alongside Autoplay — browsers require it.

**Mute:** Silence the stream by default. Use with Autoplay for background streams.

**Show Controls:** Display play, pause, and volume controls.

**Loop:** Repeat playback. Typically not used for live streams, but useful for replays.

**Privacy Mode:** Use `youtube-nocookie.com` to avoid tracking viewers via cookies.

**Play Inline on Mobile:** Play the stream inside the page on iOS instead of going fullscreen.

**Start Time / End Time:** Set where playback begins and ends (in seconds). Applies to replays.

**Show Closed Captions:** Display captions by default. Improves accessibility.

**Enable YouTube API Support:** Allow JavaScript API interaction for custom player controls or event tracking.

<Callout kind="success">
  Click **Update** or **Publish**. Your YouTube Live Stream is now live on your WordPress site.
</Callout>

For all block settings, see the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) guide.

This guide showed you how to embed YouTube Live Stream in Gutenberg using the Custom iFrame plugin. From copying the stream URL to selecting YouTube as the source type and publishing, the whole setup runs through the block editor without any code.

## Troubleshooting

**Stream shows blank or offline message:** The stream may not have started yet, or the URL points to a past broadcast. Check the stream status on YouTube directly.

**Stream does not autoplay:** Enable **Mute** alongside **Autoplay**. Most browsers block autoplay for videos with sound.

**Player is cut off:** Increase the height or enable **Auto Height** in the block settings.

For more help, see [iFrame Not Showing](/troubleshooting/iframe-not-showing).

## FAQ

<ExpandableGroup>
  <Expandable title="Can I embed a YouTube live stream before it starts?" default-open="false">
    Yes. The player shows a waiting screen until the stream goes live. Visitors see the stream automatically once it begins, without refreshing the page.
  </Expandable>
  <Expandable title="Do I need Custom iFrame Pro to embed a live stream?" default-open="false">
    No. Basic live stream embedding works with the free version. Pro adds autoplay, captions, privacy mode, and advanced API controls.
  </Expandable>
  <Expandable title="Can I embed a YouTube live stream replay?" default-open="false">
    Yes. After the stream ends, YouTube saves it as a regular video. Paste the same URL and it plays as a replay. Use Start Time and End Time (Pro) to trim the replay.
  </Expandable>
  <Expandable title="What is the difference between the watch URL and the embed URL?" default-open="false">
    Both work. The watch URL (`youtube.com/watch?v=ID`) and the embed URL (`youtube.com/embed/ID`) both load correctly in the Source URL field. Use whichever is easier to copy.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed YouTube Live in Elementor" href="/elementor/video/embed-youtube-live" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed YouTube Video in Gutenberg" href="/gutenberg/video/embed-youtube" icon="play" horizontal={false}>
    Full YouTube embed guide with all Pro options.
  </Card>
</Columns>

## Related Guides

- [Embed Video in Gutenberg - Overview](/gutenberg/embed-videos)
- [Embed YouTube Video in Gutenberg](/gutenberg/video/embed-youtube)
- [Embed YouTube Shorts in Gutenberg](/gutenberg/video/embed-youtube-shorts)
- [YouTube Advanced Controls (Pro)](/features/youtube-advanced)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)