How to Use Hover Video Widget

How to Use Hover Video Widget

Like other web content, video is also a very vital content to the website owners. At times, many website owners have to go through a hard time. The hard time is only about displaying visual content on their sites. The Hover Video Widget is going to be the right solution for you.

In the documentation below, I’ll show you, how successfully you can use the widget.

So, let’s go forward.

To Insert Widget

Here, your primary task is to insert the widget in the section. As you can see in the image example above.

Content Tab

Using the Content Tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.

Now, I’m going to show the sections of the tab and how they work behind the widget.

Hover Video

At first, when you drag and drop the widget, you’ll find two repeaters. If you want, you can get more repeaters. Just, you have to hit the +ADD ITEM.

Adding Hover Video

Next, for adding video, you need to click the repeaters. Look at the repeater Hover Video 01. Where you can define Video Type (Local Video, Remote Video) and set Video Poster. In addition, you can set Title, Icon Type (Icon/ Image), and select icon and an image icon.

Follow the same things for adding video in the rest of the repeaters.

N.B: If you set video type Local Video, you can set the video from your local server/ own website. On the contrary, regarding remote video, you have to paste the URL of the video coming from the remote server.

Hover Video Skin

Here, you can select the skin Accordion with the Default skin.

Playing Video By Hovering and Managing Height

You know, when you will hover on the video, the video will play and when you’ll hover out, the video will be pause.

Another thing is the Accordion mode (in the Accordion Skin) and Tab mode (in the Default skin) that will allow you to play and pause the individual video.

The most important thing is to manage the height of the Hover video. Do it from the Video Height.


From this section, you can manage Progress Bar, Icon, Video Preload, and Autoplay to manage the video. Just, go to the Content tab and switch on/off the buttons.

Auto Play – if you activate this button, your video will play automatically.

Style Tab

Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.


In this section, in general, you might add Border, Border Radius, and CSS Filters.

Hover Item

Normal mode:

This subsection will let you add Color, Background Type, Text Shadow, Padding, and Typography in the Normal mode. Mostly, you might set opacity for the Title, Icon.

Active mode:

Here, you can do the same things as in the Normal mode.


From this sub-section, you can increase icon size and adjust spacing. See the image above.

Just, go to the Style tab > Video.


Only, go to the Style tab > Divider.

You’ll only be able to add divider if you choose Accordion skin from the Content tab. However, you can define the divider type, width, and color. Look at the image example.

Progress Bar

In case, you want to style the progress bar. Just, go to the Style tab > Progress Bar. And add Text color, Fill color to the Progress bar. In addition, you can adjust the Height, Width, Radius, and Spacing for the bar.


You can find this section if you select the Default skin from the Content tab.


At the end of this documentation, I hope you’ve noticed what is Hover Video widget by Element Pack and how it works for you. Watch the video inserted above. If you want to discover what more is possible to do using this one, you can visit the demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.


Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.