How to use Hover Video Widget of Sky Addons for Elementor

The Sky Addons Hover Video widget displays a collection of videos — from YouTube, Vimeo, Dailymotion, or self-hosted files — stacked in a single player area that switches between them on demand. Visitors hover or click a button (or a tab) to activate a video; the previous video pauses automatically. A horizontal progress bar beneath the player shows which video is active and how far through it you are, and optionally hovering on a progress segment plays that video directly. Built on the Plyr player, the widget provides a consistent, branded playback experience across all video sources. This documentation will guide you through the process of using the Hover Video Widget to create an interactive video showcase on your website.

Features:

1. Multi-Video Repeater: Add as many videos as you like — each with its own URL (or self-hosted file), title, and icon. The widget handles all of them in a single player container.
2. YouTube, Vimeo, Dailymotion, and Self-Hosted: Supports all major video platforms plus MP4/WebM files uploaded to your media library or hosted at an external URL.
3. Two Button Styles: Show selection controls as standard Button pills or as connected Tab segments for a more integrated look.
4. Progress Bar: A set of individual progress bars — one per video — shows playback position and indicates the active video at a glance.
5. Play by Progress: Hovering on a progress segment activates that video, so visitors can jump straight to a specific clip.
6. Pause on Mouse Leave: Optionally pause playback automatically when the cursor leaves the video area.
7. Aspect Ratio Control: Lock the player to a standard ratio (1:1, 4:3, 16:9, 21:9, etc.) so the layout is stable regardless of the source video’s native dimensions.

Insert Hover Video Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Hover Video in the widget panel and drag it onto the canvas.

Configure the Video List

The Hover Video section contains the repeater where you add and manage each video.

1. Click Add Item to add a new video entry. Each item has a Video tab and a Content tab.
2. In the Video tab:
   — Video Link: Paste a YouTube, Vimeo, or Dailymotion URL (used when Self Hosted is off).
   — Self Hosted Video: Toggle on to use a file from your media library or an external URL.
   — Choose File (self-hosted): Select a video file from the media library.
   — External URL (self-hosted): Toggle on and enter a direct URL to a video file hosted elsewhere.
   — Poster (self-hosted): Upload a thumbnail image to show before the video plays.
3. In the Content tab:
   — Title: The label shown on the button or tab for this video.
   — Icon: An optional icon displayed beside the title on the button.
4. Video Height: Set the player container height (note: if Aspect Ratio is set, this has no effect — use Aspect Ratio instead for reliable sizing).
5. Aspect Ratio: Lock the player to 1:1, 2:1, 3:2, 4:3, 8:5, 16:9, 21:9, or 9:16. This is the recommended way to control player dimensions.
6. Show Button: Display the video selection buttons below the player.
7. Show Progress on Button: Show a mini progress bar inside each button while its video is playing.
8. Show Progress Bar: Show the main progress bar strip beneath the player (one segment per video).

Configure Button Options

The Button section (visible when Show Button is on) controls how the video selection controls look and behave.

1. Style: Choose Button for individual pill-shaped buttons, or Tab for a connected tab bar.
2. Alignment: Left, Center, or Right for the button group.
3. Space Between: Gap between buttons (in Button style).
4. Icon Position: Left, Right, Top, or Bottom — where the icon sits relative to the title text inside each button.
5. Icon Spacing: Gap between the icon and the title text.

Configure Player Settings

The Settings section controls playback behaviour.

1. Play By Progress: When on, hovering the cursor on a progress bar segment plays that video.
2. Pause By Screen: When on, the active video pauses as soon as the mouse leaves the player area.
3. Show Controls: Show or hide the Plyr player control bar.
4. Mute & Volume Icon: Show the volume/mute button in the control bar.
5. Current Time: Show the current playback time in the control bar.
6. Fullscreen: Show the fullscreen toggle button in the control bar.

Style Your Hover Video

Use the Style tab to customise the player, buttons, progress bars, and controls.

1. Video:
   Border, border radius, box shadow, and CSS filters for the entire video player wrapper.
2. Button:
   Padding, typography, border, border radius (Button style) or tab border radius (Tab style). Normal tab: text color, background, text shadow, box shadow, hover animation. Active tab: text color, background, border color, border radius, text shadow, box shadow — for the currently selected button.
3. Progress Bar:
   Alignment, spacing between segments, height, width, base color (background of the track), and progress color (the filled portion).
4. Button Progress:
   Style (Bottom strip or Full Height fill), height (when Bottom), base color, and progress color for the mini progress shown inside each button.
5. Controls:
   Plyr control icon color, control hover color, and primary accent color (the color of the seek bar fill and other accents in the Plyr UI).

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your Hover Video widget in action.

Best Practices

1. Always set an Aspect Ratio rather than relying on the Video Height control — it gives a stable, responsive layout that works correctly across all screen sizes and source video dimensions.
2. Keep the video list to 4–6 items for the best usability. More than that can make the button row crowded, especially on mobile.
3. For self-hosted videos, upload them in a web-optimised format (H.264 MP4) and at a resolution appropriate for the player size — full 1080p is rarely necessary for a widget-sized player.
4. Use the Poster image on self-hosted videos to give each one a recognisable preview frame — this makes the progress bar segments and buttons much more meaningful to visitors.

Troubleshooting

1. YouTube/Vimeo videos do not play: The Plyr player requires the video URL to be a valid, embeddable YouTube or Vimeo URL. Make sure the video is public (not private or unlisted in a way that blocks embeds) and that the URL is a standard watch or video URL, not a playlist or channel link.
2. Self-hosted video does not play: Check that the file URL is publicly accessible (not behind authentication) and that the server is serving the correct MIME type (video/mp4 for MP4 files). Mixed-content warnings (HTTP video on an HTTPS site) will also block playback.
3. Progress bars are the wrong size: If you set a Video Height but also have an Aspect Ratio selected, the Aspect Ratio takes precedence. Remove the Aspect Ratio selection if you want to control height manually, or keep Aspect Ratio set and remove the Video Height value.

Frequently Asked Questions

Can I mix YouTube videos and self-hosted videos in the same widget?

Yes. Each item in the repeater has its own source — some can be YouTube links while others are self-hosted files. The Plyr player handles both types seamlessly inside the same widget instance.

Does the video play automatically when the page loads?

The first video in the list is activated on load (its button/tab is in the active state), but browser autoplay policies typically block audio autoplay without user interaction. The video will begin playing in most browsers only after the user interacts with the player or a button.

What is the difference between Button style and Tab style?

Button renders each selector as a separate pill-shaped button with configurable spacing between them. Tab joins all selectors into a single connected bar, similar to a tab navigation component. The Tab style uses a shared border radius variable and looks best with all buttons having equal widths.

Can I show the widget without the selection buttons?

Yes. Disable Show Button in the Hover Video section. You can still show the progress bar, and visitors can switch videos by hovering on progress bar segments (if Play by Progress is enabled).

What video file formats are supported for self-hosted videos?

Plyr supports any format the browser’s native <video> element can play. In practice, H.264 MP4 has the widest browser support. WebM (VP8/VP9) is also well supported in modern browsers. Avoid older formats like AVI or MOV as browser support is inconsistent.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Hover Video widget:

• Iframe: Embed an external video player or any web-based content directly on your page.
• Ultra Carousel: Build a multi-item carousel that can include video cards alongside other content types.
• Simple Parallax: Add depth and motion to the section containing your Hover Video widget for a more immersive presentation.

Conclusion

The Hover Video widget is a compact, interactive way to present multiple videos in a single player — whether they are YouTube tutorials, product demos, or self-hosted portfolio clips. The progress bar, Play by Progress interaction, and flexible button styles make it engaging without being complex to set up. If you have any questions or need help, visit the Sky Addons support center.