How to add Video Player in Elementor?

Updated on January 10, 2025 by kaushal trivedi
Table Of Content

Video is an excellent medium to convey a message effectively. Using videos can be an effective tool to increase engagement on your website. 

With the Video Player widget from The Plus Addons for Elementor, you can easily add videos from YouTube, Vimeo, or self-hosted videos in Elementor.

Required Setup

Learn via Video Tutorial

How to Activate the Video Player Widget?

Go to 

  • The Plus Addons Widgets 
  • Search the widget name and turn on the toggle.

Video player activate how to add video player in elementor? From the plus addons for elementor

Key Features

  • Multiple Video Sources – You can add YouTube, Vimeo or self-hosted videos.
  • Mask Video – You can easily add a mask to a video.
  • CSS Filter – You can add different CSS filters to a video.
  • Video Popup – You can easily create a video popup.

How to Use the Video Player Widget in Elementor?

Add the Video widget from The Plus Addons for Elementor to the page. 

Video

From the Source dropdown, you have to select the video source. Here you’ll find three options – 

  • YouTube – To embed a YouTube video.
  • Vimeo – To embed a Vimeo video.
  • Self Hosted – To add a self-hosted video from the media library.

Video player video how to add video player in elementor? From the plus addons for elementor

Select the option as per your requirements, based on the selection you’ll find different options to add the video.

Video Options

In this tab, you’ll find different video options. The opinions will vary based on the selected video source.

Video player video options how to add video player in elementor? From the plus addons for elementor

Image/Icon

From the Only Icon / Full Banner dropdown, you can select an overlay for the video. Here you’ll find two options – 

  • Only Icon Image – With this option, you can use an icon as a video overlay.
  • Banner Image – With this option, you can use an icon and an image as a video overlay.
Video player image icon how to add video player in elementor? From the plus addons for elementor

Select the option as per your needs, let’s select Only Icon Image here.

From the Choose Image section, you can add an image as an icon.

How to Style the Video Player Widget?

You’ll find all the styling options under the Style tab to style the Video Player widget.

Video Title – You’ll see this option only when the Banner Image toggle is enabled under the Image/Icon tab. From here, you can manage video title typography, color and background.

Video player style how to add video player in elementor? From the plus addons for elementor

Video Description – You’ll see this option only when the Banner Image toggle is enabled under the Image/Icon tab. From here, you can manage video description typography and color.

Video Styling – From here, you can add a border, box shadow, custom CSS transform and different CSS filters for normal and hover states to the video. When the Banner Image is selected under the Image/Icon tab, you can also open the video in a popup.

Icon Setting – From here, you can style the icon on the video.

Mask Image – You can add a mask to your video from here.

On Scroll View Animation –  This is our global extension available for all our widgets, this adds scrolling animation as the widget comes in viewport. You

Learn more about On Scroll View Animation

Advanced options remain common for all our widget, you can explore all it options from here.

View Advanced tab tutorial.

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website