fbpx

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

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

Additional

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.

Video

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 the opacity for the Title, Icon of the Hover Video widget.

Active mode:

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

Icon

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

Just, go to the Style tab > Video.

Divider

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

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.

Button

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

Video

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.

SIGNUP NEWSLETTER

Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Missed Black Friday offer this year? Get up for flat 50% discount right now. Check Here

© Copyright 2021 All Rights Reserved by BdThemes

Missed the Black Friday offer this year? Get up for flat 50% discount right now.