Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

Table Of Contents

Hover Video widget

How to Use Hover Video Widget

Like other web content, video is also very vital content to the website owners. The Hover Video widget can display visual content on the sites and it is going to be the right solution for you to easily add videos without hassle.

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

So, let’s go forward.

To Insert Widget

inserting Hover Video widget

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

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 in designing the Hover Video widget.

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

Hover Video

hover video widget 1 - BdThemes

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

hover video widget 2 - BdThemes

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

hover video widget 3 - BdThemes

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

Playing Video By Hovering and Managing Height

hover video widget 4 - BdThemes

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

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.


hover video widget 5 - BdThemes

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 the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design the Hover Video widget. 

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

Let’s have a look.


hover video widget style 1 - BdThemes

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

Hover Item

Normal mode:

hover video widget style 2 - BdThemes

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

Active mode:

hover video widget style 3 - BdThemes

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.

hover video widget style 4 - BdThemes


hover video widget style 5 - BdThemes

Only, go to the Style tab > Divider.

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

Progress Bar

hover video widget style 6 - BdThemes

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 of the Hover Video widget.


hover video widget style 7 - BdThemes

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 Bdthemes is 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.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.