> 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 Video in Gutenberg

Step-by-step guide to embed YouTube video in Gutenberg using the Custom iFrame WordPress plugin. Control autoplay, captions, and playback. No coding required.


## Overview

Custom iFrame lets you embed YouTube video in Gutenberg by pasting any YouTube URL into the block. Free users get a working player. Pro users unlock autoplay, loop, captions, playback controls, and more.

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 Video in Elementor](/elementor/video/embed-youtube) guide.

## Requirements

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

## Step 1: Get the YouTube Video URL

<Steps>
  <Step title="Open YouTube" icon="play" title-type="p">
    Go to [youtube.com](https://www.youtube.com) and find the video you want to embed.
  </Step>
  <Step title="Copy the share link" icon="link" title-type="p">
    Click the **Share** button below the video. Click **Copy** to copy the link to your clipboard.
  </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="Custom iFrame for Elementor WordPress plugin by Coderz Studio showing 3000+ active installations on the plugin repository page"
      width="818"
      height="363" 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 video. 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 Video 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 YouTube URL" icon="clipboard" title-type="p">
    Paste the copied URL into the **Source URL** field. The video player appears inside the block in the editor.
  </Step>
  <Step title="Set height and publish" icon="check" title-type="p">
    Set a **Height** (450px works for most videos) or enable **Auto Height**. 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 video automatically. Enable **Mute** alongside Autoplay — browsers require it.

**Mute:** Silence the video by default. Use with Autoplay or for background videos.

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

**Loop:** Repeat the video continuously.

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

**Start Time / End Time:** Set where playback begins and ends (in seconds). Useful for skipping intros or limiting clip length.

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

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

For a full list of all YouTube advanced controls available in Pro, see the [YouTube Advanced Controls](/features/youtube-advanced) guide. 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 video in Gutenberg using the Custom iFrame plugin. From copying the video URL to selecting YouTube as the source type and publishing, the whole setup runs through the block editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need Custom iFrame Pro to embed YouTube?" default-open="false">
    No. Basic YouTube embedding works with the free version. Pro adds autoplay, loop, captions, playback controls, playlists, and advanced API support.
  </Expandable>
  <Expandable title="Why is my autoplay not working?" default-open="false">
    Browsers block autoplay for videos with sound. Enable the **Mute** toggle alongside **Autoplay**. The video starts silently and viewers can unmute manually.
  </Expandable>
  <Expandable title="Can I embed a YouTube playlist?" default-open="false">
    Yes with Pro. Add comma-separated video IDs to the **Playlist** field in the Pro playback settings.
  </Expandable>
  <Expandable title="What height should I set for a YouTube video?" default-open="false">
    For a 16:9 video at full width, 450px to 500px works well. Enable **Auto Height** to let the iframe resize automatically with the content.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed YouTube in Elementor" href="/elementor/video/embed-youtube" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed YouTube Shorts in Gutenberg" href="/gutenberg/video/embed-youtube-shorts" icon="play" horizontal={false}>
    Embed vertical YouTube Shorts in Gutenberg.
  </Card>
</Columns>

## Related Guides

- [Embed Video in Gutenberg - Overview](/gutenberg/embed-videos)
- [Embed YouTube Shorts in Gutenberg](/gutenberg/video/embed-youtube-shorts)
- [Embed YouTube Live Stream in Gutenberg](/gutenberg/video/embed-youtube-live)
- [Embed Vimeo Video in Gutenberg](/gutenberg/video/embed-vimeo)
- [YouTube Advanced Controls (Pro)](/features/youtube-advanced)