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

Requirements

Custom iFrame plugin installed and active
Elementor installed
A YouTube video URL to embed

Video Tutorial

Step 1: Get the YouTube Video URL

Open YouTube

Go to youtube.com and find the video you want to embed.

Copy the share link

Click the Share button below the video. Click Copy to copy the link to your clipboard.

Open your page in Elementor

Go to the page where you want the video. Click Edit with Elementor.

Drag the widget onto your page

Search for Custom iFrame in the Elementor widget panel. Drag the widget into your layout.

Step 3: Embed YouTube Video in Elementor

Select YouTube as the source type

In the Content tab, find Source Type and select YouTube.

Paste the YouTube URL

Paste the copied URL into the Source URL field. The video player appears in the editor.

Custom iFrame widget in Elementor editor showing YouTube URL pasted in Source URL field with live video preview

Set height and publish

Set a Height (450px works for most videos) or enable Auto Height. Click Update or Publish.

Step 4: Configure Basic Options (Pro)

Steps 4 through 8 require Custom iFrame Pro (Starter, Studio, or Agency plan). View pricing - plans start at $29 one-time.

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.

Custom iFrame Pro YouTube Basic Options in Elementor showing Autoplay, Mute, Controls, Loop, Privacy Mode, and Mobile Inline Playback toggles

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.

Custom iFrame Pro YouTube Playback settings in Elementor showing Start Time, End Time, and Playlist fields

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.

Custom iFrame Pro YouTube Appearance settings in Elementor showing Controls Color, Related Videos, Fullscreen, Annotations, and Keyboard Controls options

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.

Custom iFrame Pro YouTube Captions settings in Elementor showing Show Closed Captions toggle and Player Interface Language field

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.

Custom iFrame Pro YouTube Advanced settings in Elementor showing YouTube API Support toggle and Additional URL Parameters field

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.

FAQ

No. Basic YouTube embedding works with the free version. Pro adds autoplay, loop, captions, playback controls, playlists, and advanced API support.

Browsers block autoplay for videos with sound. Enable the Mute toggle alongside Autoplay. The video will start silently, and viewers can unmute manually.

Yes with Pro. In the Playback settings, add comma-separated video IDs to the Playlist field.

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.

Also Available For

Embed YouTube in Gutenberg

Guide for the WordPress block editor.

Embed YouTube Shorts in Elementor

Embed vertical YouTube Shorts in Elementor.

Was this page helpful?

Last updated today

Built with Documentation.AI