The Hover Video widget by Atomic Addons shows several short videos in one frame. Below the frame sits a row of buttons, one per video. When a visitor points at a button, or tabs to it, its video takes over the frame and starts playing. The videos are muted and play inline, so they suit product previews and feature loops. This guide covers adding the widget, adding the videos and the playback settings.
Enable the Hover Video Widget
Hover Video is a Free widget and works with the free Atomic Addons plugin. A few of its settings carry a Pro badge and need Atomic Addons Pro; they are marked below. Switch the widget on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Hover Video. You can also open the Creative category.
- 4
Turn the Hover Video widget on.
- 5
Click Save Settings.
Add the Hover Video Widget
Hover Video works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Hover Video. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Hover Video
Open the widget and go to Content → Hover Video. The list holds one entry per video, two sample videos by default. Click an entry to open it:
- 1
Video Type: Remote Video, the default, plays a video file from a URL. Local Video plays one from your Media Library. Pro badge: the free plugin uses Remote Video.
- 2
Video Source: Remote Video: the address of the video file, such as an MP4. It needs to be a direct link to the file, not a YouTube or Vimeo page.
- 3
Select Video: Local Video: the video in your Media Library.
- 4
Select Poster: The image shown in the frame before the video plays. It starts as Elementor's placeholder image, which the widget treats as no poster.
- 5
Title: The text on the video's button, Title Item by default.
- 6
Icon Type: Icon, the default, or Image for the button's icon. Pro badge: the free plugin uses Icon.
- 7
Icon: Icon only: the icon on the button. A star by default.
- 8
Image Icon: Image only: a small image to use as the icon.
- 9
Wrapper Link: Opens this address when the visitor clicks the video's button, in a new tab if you tick Open in new window.
Below the list:
- 1
Video Height: The height of the frame, 200 to 1000px, per screen size.
- 2
Aspect Ratio: Sizes the frame to a ratio instead: 1:1, 2:1, 3:2, 4:3, 8:5, 16:9, 21:9 or 9:16. As the panel's note says, use either Video Height or Aspect Ratio, not both. Pro badge.
Additional Settings
Content → Additional Settings controls the buttons and how the videos play:
- 1
Show Progress Bar: Adds a row of bars between the frame and the buttons, one per video, that fill as the current video plays. Pro badge.
- 2
Show Icon: Shows the icon on each button. Off by default.
- 3
Video Preload: Lets the browser load the videos when the page opens, so they start without a delay. On by default. Turn it off to save bandwidth on pages with many videos.
- 4
Autoplay: Plays the first video as soon as the page loads and moves on to the next one each time a video ends, back to the first after the last. Off by default. Visitors who ask their system for reduced motion don't get autoplay.
- 5
Video Replay: Starts a video from the beginning each time it plays, instead of carrying on where it stopped.
- 6
Show Poster Again: When the pointer leaves the frame, the video goes back to the start and shows its poster again. Without it, the video pauses where it is.
- 7
Progress On Button: Adds a progress bar inside each button. Pro badge.
Without Autoplay, a video plays while the visitor points at its button or at the frame and pauses when the pointer leaves the frame. A video that reaches its end starts again after a second and a half while it is still the current one. A button shows its title, and its icon when Show Icon is on; leave both empty and the video has no button.
Style the Hover Video
Everything below is on the Style tab:
- Video: the frame's border, border radius and box shadow.
- Buttons: the gap between buttons, icon spacing and size, padding and border radius, and the color, background and border color in Normal, Hover and Active tabs.
- Progress Bar: shown while either progress bar is on. The bar color, fill color, height, radius and the gap between the bars.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.