> 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 Elementor

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


## Overview

Custom iFrame lets you embed YouTube Shorts in Elementor by pasting any Shorts URL into the widget. 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 Gutenberg instead? Follow the [Embed YouTube Shorts in Gutenberg](/gutenberg/video/embed-youtube-shorts) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A YouTube Shorts URL to embed

## Video Tutorial

<iframe
  src="https://www.youtube.com/embed/ZJhRrDuRCt8"
  width="720"
  height="405"
  frameBorder="0"
  allowFullScreen
/>

## 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: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the Short. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.
  </Step>
</Steps>

## Step 3: Embed YouTube Shorts in Elementor

<Steps>
  <Step title="Paste the Shorts URL" icon="clipboard" title-type="p">
    In the Content tab, paste the Shorts URL into the **Source URL** field. The Short appears in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776884143/elementor/video/youtube-shorts/embed-yt-short.webp"
      alt="Custom iFrame widget in Elementor editor showing YouTube Shorts URL in Source URL field with vertical video preview"
      width="898"
      height="916" priority={true} fetchPriority="high" />
  </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 iFrame 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 Content tab to avoid cropping.
</Callout>

## 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.

**Short shows black bars:** The container width may be wider than expected. Set a fixed **Container Width** in the Style tab to match the Short's aspect ratio.

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 widget width of 315px, set height to 560px. Enable Auto Height to let the iFrame 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 Elementor](/elementor/video/embed-youtube) guide for full Pro option details.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed YouTube Shorts in Gutenberg" href="/gutenberg/video/embed-youtube-shorts" icon="layout" horizontal={false}>
    Guide for the WordPress block editor.
  </Card>
  <Card title="Embed YouTube Video in Elementor" href="/elementor/video/embed-youtube" icon="layers" horizontal={false}>
    Full YouTube embed guide with all Pro options.
  </Card>
</Columns>

## Related Guides

- [Embed Video in Elementor - Overview](/elementor/embed-videos)
- [Embed YouTube Video in Elementor](/elementor/video/embed-youtube)
- [Embed YouTube Live Stream in Elementor](/elementor/video/embed-youtube-live)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)