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
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.
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.
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.
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.
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.
In this section, in general, you might add Border, Border Radius, and CSS Filters.
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.
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 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.
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.
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.