View Categories

How to Embed YouTube Video In Elementor?

4 min read

With the Custom iFrame plugin, you can embed YouTube video in Elementor easily. Show tutorials, product demos, or any YouTube video to make your website more engaging.

Follow these steps to display a YouTube video on your website.

Not a fan of reading? No worries — we’ve got a video tutorial for you. 📺

Not a video person? No worries — scroll on for the full step-by-step guide.

Step 1: Get the YouTube Video Link

  1. Open YouTube (https://www.youtube.com/).
  2. Navigate to the particular video you want to embed.
  3. Click the ‘Share‘ button of the video > Click on ‘Copy’ button.

Step 2: Add the Custom iFrame Widget

  1. Install and Activate Custom iFrame Plugin
  2. Open your page in Elementor Editor.
  3. Search for Custom iFrame and Drag and drop the Widget onto editor area.
The image displays the WordPress plugin card for "Custom iFrame for Elementor – Embed PDF, Maps, Videos, & Websites Easily" developed by Coderz Studio. It highlights key plugin features including support for SEO-friendly, responsive, and secure iframe embeds, along with options like lazy load, auto-height, and dynamic URL integration. The plugin shows a 5-star rating from 3 reviews, is actively installed on 700+ sites, and confirms compatibility with the current WordPress version. Buttons labeled "Install Now" and "More Details" are visible, enabling easy access to the plugin. This tool is designed to streamline embedding rich media—such as videos, PDFs, and external content—directly into Elementor pages.

Step 3: Embed YouTube Video in Elementor

  1. Go to Content > In Source Type, select YouTube.
  2. Into Source URL field, paste the YouTube video URL.
Screenshot of the Elementor editing page showing how to embed YouTube video in Elementor, with options for source URL, height settings, scrollbar controls, and a live preview.

The following features are part of Custom iFrame Pro.

Get Pro →

In source field, once you’ve selected YouTube, you’ll see all the following sections.

Step 4: Configure Basic Options

This gives you control over how the embedded YouTube video behaves on your page.

  • Autoplay: Turn ON to start video automatically (mute required on most browsers). Use when you want the video to play without user action.
  • Mute: Turn ON to silence the video by default. Use with autoplay or for silent background videos.
  • Show Controls: Turn ON to display play, pause, and volume controls. Use when viewers need control over playback.
  • Loop: Turn ON to play the video on repeat. Use for background loops or short demos.
  • Privacy Mode: Turn ON to use youtube-nocookie.com for better privacy. Use when you don’t want to track viewers via cookies.
  • Play Inline on Mobile: Turn ON to play video inside the page on iOS. Use to avoid full-screen takeover on iPhones/iPads.
Screenshot of the Custom iFrame for Elementor Plugin interface showing YouTube Embed settings. Options like Autoplay, Mute, Controls Display, Loop, Enhanced Privacy Mode, and Mobile Inline Playback are clearly labeled with toggles set to either Yes or No. Designed to customize embedded YouTube videos within Elementor websites.

Step 5: Configure YouTube Playback Options

This lets you control when the video starts, ends, or plays as part of a playlist.

  • Start Time (seconds): Set when the video should begin playing. Use to skip intros or start from a key moment.
  • End Time (seconds): Set when the video should stop playing. Use to cut off outros or limit the clip duration.
  • Playlist: Add video IDs separated by commas to create a playlist. Use to play multiple videos in sequence.
Custom iFrame for Elementor Plugin interface showing YouTube Playback settings. Features include fields for specifying video Start Time and End Time in seconds, both defaulting to 0, and a Playlist input with example video IDs. Designed to fine-tune YouTube embed behavior for tailored playback experiences in Elementor websites.

Step 6: Configure YouTube Appearance Options

These let you control how the video player looks and behaves for users.

  • Controls Color: Choose Red or White for the progress bar color. Use to match your site’s color theme.
  • Show Related Videos: Show related videos from same channel (Yes) or any channel (No). Use to keep viewers on your content.
  • Allow Fullscreen: Allow users to expand the video to fullscreen. Use to give viewers better visibility.
  • Disable Annotations: Turn ON to hide video annotations. Use to remove pop-ups or distractions in the video.
  • Enable Keyboard Controls: Let users control the video using their keyboard. Use for better accessibility and user experience.
Custom iFrame for Elementor Plugin interface displaying YouTube Appearance settings. Includes dropdown menu for Controls Color (set to Red), and toggle switches for showing related videos (disabled), allowing fullscreen (enabled), disabling annotations (disabled), and enabling keyboard controls (enabled). Helps fine-tune YouTube player aesthetics and functionality for embedded videos in Elementor-based websites.

Step 7: Configure YouTube Captions Options

This controls caption settings and player language display.

  • Show Closed Captions: Turn ON to display captions by default if available. Use to improve accessibility or reach a wider audience.
  • Player Interface Language: Enter a language code like en, fr, or es for player controls. Use to match the video player’s language to your audience.
Custom iFrame for Elementor Plugin settings for YouTube captions. Features a toggle labeled “Show Closed Captions” set to No, and a text input for “Player Interface Language” with placeholder examples like en, fr, es. Includes description instructing users to enter ISO 639-1 language codes for customizing player control language. Enhances accessibility and localization options for embedded YouTube videos in Elementor.

Step 8: Configure YouTube Advanced Options

This section is for developers needing more control or customization.

  • Enable YouTube API Support: Turn ON to allow advanced interaction using JavaScript API. Use for custom player controls or tracking events.
  • Additional URL Parameters: Add custom YouTube parameters in param=value format. Use to fine-tune playback behavior like quality, captions, or autoplay.
Custom iFrame for Elementor Plugin interface highlighting YouTube Advanced settings. Displays an inactive toggle switch for “Enable YouTube API Support” and a text field under “Custom Parameters” labeled “Additional URL Parameters,” with an example format: param1=value1&param2=value2. Includes a note instructing users to input YouTube parameters in proper URL syntax. Provides advanced customization for embedded YouTube video behavior on Elementor websites.

Step 9: Save & Publish

Style your iFrame with our Style Custom iFrame guide—adjust dimensions, backgrounds, borders, and more! 🎨✨

Click Update, and your interactive YouTube video is now live on your page!

You’re all set! With Custom iFrame, you can embed YouTube video in Elementor easily. Keep visitors interested by adding YouTube videos to your site. Make your website more interactive and let it do the streaming for you!

How’s your vibe after reading this? —Tap an emoji