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

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


## Overview

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

## Requirements

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

## Video Tutorial

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

## 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: 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 video. 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 Video in Elementor

<Steps>
  <Step title="Select YouTube as the source type" icon="youtube" title-type="p">
    In the Content tab, 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 in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776869482/elementor/video/youtube/paste-yt-url.webp"
      alt="Custom iFrame widget in Elementor editor showing YouTube URL pasted in Source URL field with live video preview"
      width="1024"
      height="489" priority={true} fetchPriority="high" />
  </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 Basic Options (Pro)

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

Control how the embedded YouTube video behaves on your page:

- **Autoplay:** Start video automatically. Mute is required on most browsers for autoplay to work.
- **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. Use for background loops or short demos.
- **Privacy Mode:** Use `youtube-nocookie.com` to avoid tracking viewers via cookies.
- **Play Inline on Mobile:** Play the video inside the page on iOS instead of going fullscreen.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776869484/elementor/video/youtube/yt-basic-options.webp"
  alt="Custom iFrame Pro YouTube Basic Options in Elementor showing Autoplay, Mute, Controls, Loop, Privacy Mode, and Mobile Inline Playback toggles"
  width="375"
  height="500" priority={true} fetchPriority="high" />

## Step 5: Configure Playback Options (Pro)

Control when the video starts, ends, and whether it plays as a playlist:

- **Start Time (seconds):** Set the point where playback begins. Use to skip intros or jump to a key moment.
- **End Time (seconds):** Set where playback stops. Use to cut outros or limit clip length.
- **Playlist:** Add comma-separated video IDs to play multiple videos in sequence.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776869486/elementor/video/youtube/yt-playback.webp"
  alt="Custom iFrame Pro YouTube Playback settings in Elementor showing Start Time, End Time, and Playlist fields"
  width="357"
  height="389"
/>

## Step 6: Configure Appearance Options (Pro)

Control how the player looks and behaves for visitors:

- **Controls Color:** Choose Red or White for the progress bar. Use to match your site's color theme.
- **Show Related Videos:** Limit related videos to the same channel or allow any channel.
- **Allow Fullscreen:** Let viewers expand the video to fullscreen.
- **Disable Annotations:** Hide pop-up annotations during playback.
- **Enable Keyboard Controls:** Let users control playback with their keyboard.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776869488/elementor/video/youtube/yt-appearance.webp"
  alt="Custom iFrame Pro YouTube Appearance settings in Elementor showing Controls Color, Related Videos, Fullscreen, Annotations, and Keyboard Controls options"
  width="361"
  height="447"
/>

## Step 7: Configure Captions Options (Pro)

- **Show Closed Captions:** Display captions by default when available. Improves accessibility.
- **Player Interface Language:** Enter an ISO 639-1 code (e.g. `en`, `fr`, `es`) to set the player controls language.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776869489/elementor/video/youtube/yt-captions.webp"
  alt="Custom iFrame Pro YouTube Captions settings in Elementor showing Show Closed Captions toggle and Player Interface Language field"
  width="358"
  height="274"
/>

## Step 8: Configure Advanced Options (Pro)

- **Enable YouTube API Support:** Allow advanced JavaScript API interaction for custom player controls or event tracking.
- **Additional URL Parameters:** Add YouTube URL parameters in `param=value` format to fine-tune playback behavior.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776869491/elementor/video/youtube/yt-advanced.webp"
  alt="Custom iFrame Pro YouTube Advanced settings in Elementor showing YouTube API Support toggle and Additional URL Parameters field"
  width="361"
  height="398"
/>

## Troubleshooting

**Video does not play:** Confirm the video is public on YouTube. Unlisted videos embed, but private videos do not.

**Autoplay does not work:** Most browsers require the video to be muted before autoplay works. Enable **Mute** alongside **Autoplay**.

**Black bars appear:** Set a custom height that matches your video aspect ratio, or enable **Auto Height**.

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

## 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 will start silently, and viewers can unmute manually.
  </Expandable>
  <Expandable title="Can I embed a YouTube playlist?" default-open="false">
    Yes with Pro. In the Playback settings, add comma-separated video IDs to the **Playlist** field.
  </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** if you want the iframe to resize automatically with the content.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

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

## Related Guides

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