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

Step-by-step guide to embed YouTube Shorts in Gutenberg using the Custom iFrame WordPress plugin. Vertical video, no coding required.


## Overview

Custom iFrame lets you embed YouTube Shorts in Gutenberg by pasting any Shorts URL into the block. Shorts use a vertical 9:16 format, so height settings matter more than with standard videos.

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

## Requirements

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

## Step 1: Get the YouTube Shorts URL

<Steps>
  <Step title="Open YouTube and find the Short" icon="play" title-type="p">
    Go to [youtube.com](https://www.youtube.com) and find the Short you want to embed. Shorts URLs follow the format `youtube.com/shorts/VIDEO_ID`.
  </Step>
  <Step title="Copy the share link" icon="link" title-type="p">
    Click the **Share** button on the Short. Click **Copy Link** to copy the URL.
  </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 Short. 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 Shorts 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 Shorts URL" icon="clipboard" title-type="p">
    Paste the copied URL into the **Source URL** field. The Short appears inside the block in the editor.
  </Step>
  <Step title="Set the height for vertical format" icon="sliders" title-type="p">
    Shorts are vertical (9:16 ratio). Set **Height** to at least **560px** for a standard width, or enable **Auto Height** to let the block resize automatically.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**. Your YouTube Short is live on the page.
  </Step>
</Steps>

<Callout kind="tip">
  Auto Height works well for Shorts since the vertical format varies by screen width. Enable it in the block settings panel to avoid cropping.
</Callout>

<Callout kind="success">
  Click **Update** or **Publish**. Your YouTube Short 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 Shorts in Gutenberg using the Custom iFrame plugin. From copying the Shorts link to setting the vertical height and publishing, the whole setup runs through the block editor without any code.

## Troubleshooting

**Short appears cropped:** Increase the height or enable Auto Height. Shorts need more vertical space than standard videos.

**Short does not load:** Confirm the Shorts URL is public. Copy the link directly from the Share button rather than from the browser address bar.

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

## FAQ

<ExpandableGroup>
  <Expandable title="What height should I use for YouTube Shorts?" default-open="false">
    Shorts are 9:16 vertical video. At a block width of 315px, set height to 560px. Enable Auto Height to let the block calculate the correct size automatically.
  </Expandable>
  <Expandable title="Do I need Custom iFrame Pro to embed YouTube Shorts?" default-open="false">
    No. Basic Shorts embedding works with the free version. Pro adds autoplay, loop, captions, playback controls, and advanced YouTube API support.
  </Expandable>
  <Expandable title="Can I embed a YouTube Short using its full watch URL?" default-open="false">
    Yes. Both the Shorts URL (`youtube.com/shorts/ID`) and the standard watch URL (`youtube.com/watch?v=ID`) work in the Source URL field.
  </Expandable>
  <Expandable title="Can I control autoplay and mute for Shorts?" default-open="false">
    Yes with Pro. The same YouTube Basic Options available for regular videos (Autoplay, Mute, Loop, Privacy Mode) work for Shorts too. See the [Embed YouTube Video in Gutenberg](/gutenberg/video/embed-youtube) guide for full Pro option details.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed YouTube Shorts in Elementor" href="/elementor/video/embed-youtube-shorts" 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 Live Stream in Gutenberg](/gutenberg/video/embed-youtube-live)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)