Activate experimental feature
The YouTube element is part of the V4 editor.
Learn more about activating V4 features here.
Add the widget
Add the element to the canvas
To access and use a widget:
In Elementor Editor, click +.
All available elements are displayed.Click or drag the element to the canvas. For more information, see Add elements to a page.
What is the YouTube element?
The YouTube element lets you quickly embed YouTube videos into your web page.
Common use case
Alex is designing a home page for their web design business and wants to embed YouTube content to draw potential customers’ attention.
Youtube element video
See a video demonstrating the widget in action.
Adding a YouTube element: Step-by-step
In the example below, we’ll embed a YouTube video using the YouTube element.
Add a YouTube element
To add a YouTube element:
- Drag the element to page.
The element options appear in the left panel.
- In the YouTube URL field, enter the link to the YouYube video you want to embed.
- (Optional) Enter a Start and/or a Stop time to only show a portion of the video.TipThe times entered should be in seconds.
- Enter any additional options for the video. These options are explained below.
- Click the Style tab to adjust the look and feel of the element, for example adding a background.
Settings for the YouTube element
You can customize your elements using the General and Style tabs. Click the tabs below to see all the settings available for this widget.
General tab
Add, delete, and edit menu items and controls.
Start time
Specify a time for the video to start (in seconds). Allows you to only show a portion of the video to visitors.
End time
Specify a time for the video to stop (in seconds). Allows you to only show a portion of the video to visitors.
Autoplay
Decide if the video should start playing automatically when someone visits the page.
If enabled, you can choose:
- Play On Mobile: You can also enable the autoplay for mobile devices.
Mute
Toggle on if you want the video to start without sound.
Loop
Toggle on to continuously play the video.
Lazy Load
Toggle Lazyload on to load the extra video stuff only once someone hits the play button. This feature helps in improving page speed. Learn more about Lazy Loading.
Player Controls
Show or hide buttons like Play, Pause, and Volume.
Captions
Toggle to Yes if you want the YouTube captions to show in your video.
Privacy mode
If you toggle on, YouTube won’t store information about visitors on your website unless they play the video.
Related videos
Pick what YouTube should suggest after your video ends. Choose from the Current Video Channel or Any Video.
Open On
Allows you to choose when the dropdown menu will activate, when you select it (Click), or when you mouse over it (Hover).
Animation
You can choose to have your dropdown slowly appear. If you do, Animation Duration determines the amount of time it will take for the dropdown to fully appear.
Style tab
Determine the look and feel of menu items and controls.
Menu Items
Control how the content of your menu is displayed.
Space Between Items
Use the slider to controls the amount of room between the items in your menu.
Distance from content
Use the slider to control how far the distance between the menu and content area.
Typography
Determine how the text on the menu tabs will appear. Learn more about typography.
Color
Determine the color of the text on the menu tabs. To choose a color, either use the color picker or a global color.
Shadow
Set shadow effects for the text on the menu tabs. Learn more about shadows.
Background type
Set a background for the menu tabs. Learn more about backgrounds.
Border type
Add a border around the menu items. If you add a border, you’ll have the option of setting a border type and the border’s width. Learn more about border types.
Divider
Place a horizontal divider between menu items. After you add a divider, define the divider settings :
- Style (Solid, Double, Dotted, Dashed)
- Width
- Height
- Color
Border Radius
Round the corners of the border if you added one.
Padding
Add padding around the menu item borders if you added them. Learn how to create space with padding and margins.
Icon - For Elementor Hosting users
This section is only relevant if you chose to place an icon next to your menu item.
Position
Determine if the icon next to the menu item will be located to its right, left, top or bottom.
Size
Use the slider to increase and decrease the size of the icon next to the menu item.
Spacing
Use the slider to increase and decrease the amount of room between the icon and the tab name.
Normal
How the icon will appear by default.
Hover
How the icon will appear when visitors hover over it.
Active
How the icon will appear when the item is selected.
Color
Determine the color of the icon. To choose a color, either use the color picker or a global color.
Menu Toggle
Best practice is to replace the menu with a toggle if visitors are using a mobile device. The section controls the look of this toggle.
Size
Use the slider to set the size of the menu toggle.
Normal
How the toggle will appear by default.
Hover
How the toggle will appear when moused over.
Active
How the toggle will appear when selected.
Color
Set the color of the toggle For more details, see Choose a color or Use global fonts and colors.
Background type
Add a background to the toggle. For more details, see Create a Background.
Border type
Use the dropdown menu to add a border to the toggle. Learn more about border types.
Box shadow
Click the pencil icon 
to add shadow to the toggle. Learn more about shadows.
Border Radius
Round the corners of the borders around the toggle, if you added a border.
To adjust the radius with the counter control, use the four counters to adjust each individual corner. Learn more about measurement methods.
Distance from dropdown
Use the slider to control the amount of space between the menu toggle and menu content.
Content
Determine how the content in the menu tab will appear.
Background type
Add a background to the menu tab’s content. Learn more about backgrounds.
Border type
Add a border to the menu tab’s content. Learn more about border types.
Border Radius
Round the corners of the borders around the menu item content, if you added a border.
To adjust the radius with the counter control, use the four counters to adjust each individual corner. Learn more about measurement methods.
To adjust the radius, use the four counters to adjust each individual corner. Learn more about these measurement methods.
Box Shadow
Click the pencil icon to add a shadow to the menu tab’s content. Learn more about shadows.
Padding
Add space around the menu item content. Learn how to create space with padding and margins.
Dropdown menu
Best practice is for menus to appear as dropdowns on mobile. This section determines the look of these dropdown menus.
Normal
How the dropdown menu will appear by default.
Active
How the dropdown menu will appear when selected.
Text color
Select a text color for the dropdown menu text For more details, see Choose a color or Use global fonts and colors.
Background Type
Add a background to your dropdown menu. For more details, see Create a Background.
Box Shadow
Click the pencil icon to add a box shadow to the dropdown menu. Learn more about shadows.
Dropdown Box
The dropdown box surrounds the menu tab’s content. Use this section to style the dropdown box.
Border type
Add a border to the dropdown box. Learn more about border types.
Border Radius
Round the corners of the border surrounding the dropdown box if you added them.
To adjust the radius, use the four counters to adjust each individual corner. Learn more about these measurement methods.
Box Shadow
Click the pencil icon to add a shadow to the dropdown box. Learn more about shadows.
Advanced tab
Control the placement of your widget, insert links, add custom code and more.
Advanced
Learn more about the Advanced tab settings.
