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

# YouTube Advanced Controls

Control autoplay, loop, start time, playlists, and playback for YouTube embeds in Elementor and Gutenberg using Custom iFrame Pro.


## Overview

Custom iFrame YouTube Advanced Controls give you full control over how YouTube videos play on your site. Set autoplay, loop, start and end times, related video behavior, player colors, and API support directly from the widget or block settings.

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

<Callout kind="info">
  YouTube Advanced Controls require Custom iFrame Pro (Starter, Studio, or Agency plan). Basic YouTube embedding works with the free version. [View pricing](https://customiframe.com/pricing) — plans start at $29 one-time.
</Callout>

## Requirements

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

## Before You Start

In both Elementor and Gutenberg, set **Source Type** to **YouTube** before pasting your URL. This activates the YouTube-specific settings panel where all advanced controls appear.

## Basic Options

| Option | What it does |
|---|---|
| **Autoplay** | Starts the video automatically when the page loads |
| **Mute** | Silences the video by default. Required for autoplay in most browsers |
| **Show Controls** | Displays play, pause, volume, and seek bar on the player |
| **Loop** | Repeats the video continuously after it ends |
| **Privacy Mode** | Uses `youtube-nocookie.com` to prevent viewer tracking via cookies |
| **Play Inline on Mobile** | Plays the video inside the page on iOS instead of opening fullscreen |

<Callout kind="alert">
  Autoplay requires Mute to be enabled on most browsers. Browsers block autoplaying audio by default. Enable both Autoplay and Mute together for reliable cross-browser autoplay.
</Callout>

## Playback Options

| Option | What it does |
|---|---|
| **Start Time (seconds)** | Sets the point where playback begins. Use to skip intros or jump to a specific moment |
| **End Time (seconds)** | Sets where playback stops. Use to cut outros or limit clip length |
| **Playlist** | Add comma-separated YouTube video IDs to play multiple videos in sequence |

## Appearance Options

| Option | What it does |
|---|---|
| **Controls Color** | Sets the progress bar color to Red or White to match your site's color theme |
| **Show Related Videos** | Limits related videos to the same channel, or allows videos from any channel |
| **Allow Fullscreen** | Lets visitors expand the video to fullscreen |
| **Disable Annotations** | Hides pop-up annotations during playback |
| **Enable Keyboard Controls** | Lets visitors control playback with keyboard shortcuts |

## Advanced Options

| Option | What it does |
|---|---|
| **Enable YouTube API Support** | Allows advanced JavaScript API interaction for custom player controls or event tracking |
| **Additional URL Parameters** | Add YouTube URL parameters in `param=value` format to control any playback behavior not covered by the settings above |

## How to Configure YouTube Advanced Controls

### In Elementor

<Steps>
  <Step title="Select the Custom iFrame widget" icon="mouse-pointer" title-type="p">
    Click the widget to open its settings. Go to the **Content** tab.
  </Step>
  <Step title="Set Source Type to YouTube and paste the URL" icon="play" title-type="p">
    Set **Source Type** to **YouTube**. Paste the video URL into the **Source URL** field. The video appears in the editor.
  </Step>
  <Step title="Configure the options you need" icon="sliders" title-type="p">
    Scroll through the **Basic Options**, **Playback Options**, **Appearance Options**, and **Advanced Options** sections. Enable or set only the options your use case requires.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**.
  </Step>
</Steps>

### In Gutenberg

<Steps>
  <Step title="Select the Custom iFrame block" icon="mouse-pointer" title-type="p">
    Click the block to open its settings in the right panel.
  </Step>
  <Step title="Set Source Type to YouTube and paste the URL" icon="play" title-type="p">
    Set **Source Type** to **YouTube**. Paste the video URL into the **Source URL** field.
  </Step>
  <Step title="Configure the options you need" icon="sliders" title-type="p">
    Scroll through the YouTube settings sections in the right panel and configure the options you need.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**.
  </Step>
</Steps>

<Callout kind="success">
  Your YouTube advanced settings are live. The video plays with the behavior you configured.
</Callout>

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need Pro to embed YouTube at all?" default-open="false">
    No. Basic YouTube embedding works with the free version. Pro adds autoplay, loop, start and end times, playlists, controls color, related video control, and API support.
  </Expandable>
  <Expandable title="Why is autoplay not working?" default-open="false">
    Browsers block autoplay for videos with sound. Enable both **Autoplay** and **Mute** together. The video starts silently and visitors can unmute manually.
  </Expandable>
  <Expandable title="How do I get a YouTube video ID for the Playlist field?" default-open="false">
    The video ID is the string after `v=` in a YouTube URL. For `youtube.com/watch?v=dNF5VdH9Y0E`, the ID is `dNF5VdH9Y0E`. Add multiple IDs separated by commas in the Playlist field.
  </Expandable>
  <Expandable title="What does Privacy Mode do?" default-open="false">
    Privacy Mode switches the embed URL from `youtube.com` to `youtube-nocookie.com`. YouTube does not set cookies or track viewer data in this mode. Use it for GDPR-compliant embeds.
  </Expandable>
</ExpandableGroup>

---

## Related Guides

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