WPDesigns Site Logo

How to Add a Video in Elementor

Add a video in Elementor Cover
Share This Post
In this WPDesigns article, we will discuss how to add a video in Elementor to your blog post or page and set it up with the settings you need.
Adding videos to your website will help engage your audience and keep them on the page for longer.  Google is also taking videos further into their search engine results and is making them more prominent.

Table of Contents

Add a video with Elementor
Choose the Video widget

The first step is to make sure you can open the page that you would like to add the video.  Once on your page, access the Elementor widgets and search for “Video.”  You can then drag and drop the video into your desired location, and you will then be able to access all the video options.  The video options vary depending on the source you have added, whether you want to add an image overlay etc.

Video in Elementor - Sources & Edit Options

Once you have added your widget for the video in Elementor, you can now add the content of the video and set up how it is going to display and show on the site.  You can select from a variety of options and settings depending on if you’d like the video to autoplay, have an image overlay, have sound, loop continuously, or load only when clicked.


You can work your way through the list to adjust all the settings you need.

  • Source – You will need to select the video you want to add from Youtube, Vimeo, Dailymotion and self Hosted (which can be from an external server).  
  • Link – Add the link to the video by either copying the URL from the address bar if you are using Youtube, Vimeo or Dailymotion, or alternatively you will need to copy the link from the Media Library if using a self-hosted video.
  • Start Time – This is useful if you wish to avoid the opening credits or just to have the video start from a particular moment.
  • End Time – Similar to Start Time this is useful to have the video end at a particular moment.
Edit Video Content Tab
Add your video link the content tab

Video Options

The video options will vary slightly depending on which source you have selected, but they remain mostly the same.

  • Auto-play – Selecting Yes will start the video playing once it has loaded.
    • If you choose to auto-play you will also have the option of “Play on Mobile“.
  • Mute – Remove the sound from your video.
  • Loop – This will keep the video going round and round.
  • Player controls – This removes the play, pause, and volume controls.
  • Modest Branding – You can hide the Youtube logo from here.
  • Privacy Mode – By default, Youtube will store information about the visitors, turn this on, so information is only stored if they play the video.
  • Lazy Load – Delays the loading of the video until it is clicked.
  • Suggested Videos – Choose the type of video to be suggested after this one is finished.

Image Overlay

Note: If you add an image overlay to the video then this will over-ride the auto-play on the video.

Video in Elementor Content Box
Add an image overlay if needed

If you set the image overlay to Yes then you will have a new set of options.

  • Image – You can set your new image overlay here.  For the recommended image size I would suggest an image that is the same aspect as your video.  If you are not sure something around 480 x 270 px (for a smaller video) up to 1920 x 1080 px (for full screen).
  • Lazy Load – Replaces the video with a static image and play icon, if the user clicks then it will load the video, if the user does not click then the video is never loaded.  This is a great way to speed up your page containing videos.
  • Play Icon – You can turn the play icon on and off.
  • Lightbox – You can choose to have the video play in its existing window or with the lightbox it will pop up and create a large box on the screen.


You can adjust the aspect ratio, add CSS filters, change the color and height of the play icon, and add a shadow under the icon here.

  • Aspect Ratio –  You can choose the aspect ratio that best suits your video and needs – 1:1, 3:2, 4:3, 16:9, 21:9, and 9:16
  • CSS Filters – You can change the Blur, Contrast, Brightness, Saturation, and Hue.
  • Play Icon – If you enabled the play icon then you have these extra options.
    • Color – Set the color of your play icon.
    • Size – Choose the size of it.
    • Shadow – Set the shadow to make it pop a little more.
Video Content Style Tab
Style the video as needed and change the aspect ratio
Video Content Advanced Tab
The advanced tab allows a whole new range of options


The Advanced tab is full of useful features:

  • Advanced – Options include; margin, padding, z-index, CCS ID and CSS Class.
  • Motion Effects – There are a range of scrolling effects, mouse effects, and you can also choose how the selected element enters the screen, the delay and if it is sticky.
  • Background – You can select the background for standard and also for hover.  You can choose from a solid background and a gradient.
  • Border – This allows you to add a border to the element when standard and hover along with the border-radius.  You can also add a box-shadow.
  • Positioning – You can change how the element is positioned on the page. For the page width, you have default, inline, and custom.  For the page position, you have default, absolute, and fixed.  Check out this article for a deep look into the positioning properties in Elementor.
  • Responsive – The responsive options will allow you to hide certain sections or elements on different screen sizes.  This can be useful when redesigning a page for mobile. On certain elements, you can reverse the columns.
  • Attributes – (Pro Feature) You can add custom attributes to the element; you can find a full list here.
  • Custom CSS – (Pro Feature) You can add CSS to the site or the element through this box.  It is best to add the CSS for the element and add the CSS for the global setting site.  You can use “selector” to target the specific element you have open.
Social Media
Recent Posts
5 Web Design Trends for 2022
5 Web Design Trends for 2022

The creative world of web design has always been the designer’s wonderland that combines various disciplines, including visual design, psychology, and wordcraft. As technology progresses

Read More »
Want us to get Creative?

We would love to hear from you!

Josh Cut Out


Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.