help center

Search
Close this search box.
On this page

Video widget

Last Update: February 2, 2024

Add the widget

video widget icon Video widget 1

To access and use a widget:

  1. In Elementor Editor, click +.
    All available widgets are displayed.

  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Video widget?

The Video widget lets you easily embed videos from various sources directly onto your site.

This widget lets you add videos from platforms like YouTube, Vimeo, and self-hosted videos. It provides customization options for video controls, play buttons, and other display settings to ensure your video fits seamlessly with your site’s design.

Common use case

Emily runs a fitness blog aimed at guiding beginners through various workout routines. To provide visual demonstrations and attract visitors, Emily decided to showcase the video content of her website.

They then add the relevant workout video with a custom thumbnail image on the hero section. This quickly grabs visitors’ attention and gets them to understand what the blog is about.

video widget Video widget 3

Additional use cases

  • Feature corporate videos, testimonials, or promotional content to convey brand messages effectively.
  • Show property tour videos to give potential buyers a virtual walkthrough of properties.
  • Feature music videos, interviews, or behind-the-scenes footage to engage fans.

Add a Video widget: Step-by-step

  1. Add the Video widget to the canvas. For details, see Add elements to a page.
  2. In the Content tab, under the Video section, in the Source field, choose between YouTube, Vimeo, Dailymotion, VideoPress, or Self Hosted.
    video source Video widget 5
    Note: The options below the Source field change based on the type of video source you choose. For this example, we’ll add a video from the Elementor YouTube channel, How to Create a Landing page in WordPress With Elementor Hosting.
  3. In the Link field paste the link of the YouTube video.
    video link 1 Video widget 7
  4. In the Start Time field add a start time (in seconds) if you want to play video from a specific portion.
    video start time Video widget 9
  5. In the End Time field add the end time if you want to end a video on a specific portion.
    end time Video widget 11
    Tip: Leave the Start and End Time fields empty if you want the full video.

Settings for the Video widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

In the Content tab, you can add videos from multiple sources, such as YouTube, Vimeo, and DailyMotion, or even upload your own. Each source offers unique customization features for your video.

video source youtube Video widget 13

YouTube

Add a YouTube video link.

Specify video start time (in seconds)

Specify video end time (in seconds)

Decide if the video should start playing automatically when someone visits the page.

If enabled:

  • Play On Mobile: You can also enable the autoplay for mobile devices.

 

Slide to YES if you want the video to start without sound.

Slide to YES to play the video continuously.

Show or hide buttons like Play, Pause, and Volume.

  • Modest Branding: Slide to YES to hide YouTube’s logo during playback (still shows on the thumbnail).

 

Slide ON or OFF. When ON, YouTube won’t store information about visitors on your website unless they play the video.

 

Enable the Lazyload toggle 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.

Pick what YouTube should suggest after your video ends. Choose from the Current Video Channel or Any Video.

video source vimeo 1 Video widget 15

Vimeo

Add a Vimeo video link.

Specify video start time  (in seconds)

Slide to YES to automatically play the video on the page load.

Slide to YES if you want the video to start without sound.

Slide to YES to play the video continuously.

Slide ON or OFF. When ON, Vimeo won’t store information about visitors on your website unless they play the video

Enable the Lazyload toggle 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.

Decide whether to Show or Hide the intro title.

Choose whether to Show or Hide the intro portrait.

Decide whether to Show or Hide the intro byline.

Pick the color for control buttons like play/pause.

video source dailymotion 1 Video widget 17

Dailymotion

Add a Dailymotion video link.

Specify video start time  (in seconds)

Move the slider to YES to automatically play the video on the page load

Slide to YES if you want the video to start without sound.

Decide whether to Show or Hide buttons like Play/Pause and Volume

Choose to Show or Hide details like the video’s title.

Decide if you want to Show or Hide the video logo.

Enable the Lazyload toggle 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.

Pick the color you’d like for the player buttons.

video source videopress 2 Video widget 19

VideoPress

If your VideoPress video is in your Media Library, leave toggle to No. You can choose or upload the video directly from the website’s media library

  • Choose Video File: If the video is not in your Media Library, slide the toggle to Yes. This will open a text box – enter the file’s URL.

 

Specify video start time (in seconds)

Specify video start time (in seconds)

Slide to YES if you want the video to start without sound.

Slide to YES to play the video continuously.

Show or hide buttons like Play, Pause, and Volume.

  • Modest Branding: Slide to YES to hide YouTube’s logo during playback (still shows on the thumbnail).

 

video source self hosted Video widget 21

Self Hosted

If your Self Hosted video is in your Media Library, leave toggle to No. You can choose or upload the video directly from the website’s media library

  • Choose Video File: If the video is not in your Media Library, slide the toggle to Yes. This will open a text box – enter the file’s URL

 

Specify video start time (in seconds)

Specify video end time (in seconds).

Toggle to YES for the video to start playing as soon as the page loads.

Toggle to YES for the video to start without sound

Toggle to YES for the video to continuously replay.

Decide if you want to Show or Hide control buttons like Play/Pause and Volume.

Choose to show or hide the download option. (applicable for Chrome only).

Preload attribute determines how the video loads as soon as the page opens. You have three choices: Meta, Auto, and None.

  • Meta: This option loads only the metadata of the video when the page loads. Metadata includes details like video duration, dimensions, and other basic information, but the video content itself (the actual video frames) isn’t loaded. This can help with faster page load times.
  • Auto: With this option, the video will start loading as soon as the page is opened, ensuring that playback is smooth and immediate when the user decides to play it. This might use more bandwidth initially but provides a seamless user experience.
  • None: If you choose None, the video won’t preload at all when the page is opened. It will only start loading when the user decides to play the video. This can be beneficial for conserving bandwidth but might result in a slight delay when the user hits play.

Select the initial visual placeholder or preview for the video before it’s played.

image overlay Video widget 23

Choose the Show or Hide the image overlay.

Select or upload the image.

Adjust image size. Choose from thumbnail, full size, or specify a custom size.

Toggle to YES to display a play icon. You can opt for the default play button icon, upload an SVG, or pick an icon from the available library.

Toggle ON to play the video in a Lightbox.

Style tab

The options in the Style tab let you adjust your video styling by setting the aspect ratio, adding CSS filters, and additional customization features.

video styling options Video widget 25
Adjust the video’s shape with options like square (1:1), classic (4:3), widescreen (16:9), and more.
Customize the video’s appearance with effects like blur, brightness, and color adjustments.
image overlay styling Video widget 27

Define icon size.

Click the 🖋️ icon to add a shadow to the play icon. Learn more about Shadows.

Advanced tab

The Advanced tab provides options to control video position, adjust spacing, add custom code, and more.

Advanced tab Layout Video widget 29

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!