Sky Addons  ·  Elementor Widget
INTRODUCING

Hover Video

Video that plays on hover in Elementor — YouTube, Vimeo, self-hosted or remote files, muted until the cursor arrives.

Content · Video List

Two clips, one player.

Every clip is a row in the Video List repeater — a title and a source. The titles become the buttons under the frame, and hovering one swaps the clip without reloading anything.

Style · Button Progress

The progress runs inside the button.

With Show Progress Bar off and Button Progress on, the fill moves through the button itself. Style: Full Height floods the whole pill; the bottom option draws a 2px line instead.

Content · Video Link + Self Hosted

YouTube, Vimeo and a library file.

Each row picks its own source — paste a YouTube, Vimeo or Dailymotion link, or switch Self Hosted on and choose a file. Three sources here, one widget, one set of tab buttons across the top.

Layout · Two players, side by side

Four sources, one widget.

Every clip in the repeater picks its own source — a YouTube, Vimeo or Dailymotion link, or a file straight out of the Media Library. Mix them inside a single widget; the player, the buttons and the progress bar stay the same.

Style · Tab buttons

One strip, no gaps.

Button Style: Tab drops the gap between buttons and rounds only the two outer corners, so the switcher reads as one strip. The fill here is Button Progress — Full Height, running through the active tab.

↓ Redesign starts here · same widget, new layout

Five chapters, one frame.

Everything above this line is the original page. Everything below is the same Hover Video widget, laid out so each section changes one setting and says which.

Setting · Show Controls

A player, or just moving picture.

One switcher decides whether the viewer gets a bar to scrub or a clip that simply reacts to the cursor.

Show Controls → On

Scrub bar, mute, current time, fullscreen. Use it when the video is the content.

Show Controls → Off

No chrome at all. The clip plays under the cursor and stops when it leaves.

Style · Accent Color

One colour field. Four places.

Active button, both progress bars and the player highlight all read from a single Accent Color — one field, four places. Everything else here is identical.

Accent → #8441A4

Accent → #E0528D

Accent → #3F96EB

Repeater · Video Link / Self Hosted

One list can hold

Sources do not have to match. Each row in the repeater picks its own — paste a link, or flip Self Hosted and choose a file. The buttons below switch between all three.

Setting · Button Style

Pills, or a tab strip.

Same two clips, same colours — only the Style select differs. Tab mode joins the buttons into one bar under the frame.

Style → Button

Style → Tab

In practice

Turn every button off and it is just a feature block.

One video, no buttons, no bar, autoplay and loop on. It sits in a split layout like any image would — except it moves, and it still pauses when the cursor leaves.

Show Button → off · Controls → off · Autoplay + Loop → on

Style · Progress Bar

One camera.
Every angle.

A hairline scrub sits under the frame, one segment per clip. Alignment, Height, Width, Spacing and both colours are separate controls — this one runs 3px tall, 90px wide, centre-aligned, white on 16% white.

8

Aspect ratios, 1:1 through 9:16

4

Sources — YouTube, Vimeo, Dailymotion, library

2

Button styles, Button or Tab

1

Accent Color drives all of it

Setting · Show Button off

Three clips. No chrome.

Turn Show Button off and the widget becomes a single silent loop — Autoplay First Video and Loop on, Show Controls off, Pause Off-screen on. Three of them side by side read as a product grid, not a player.

Wide

Autoplays muted, loops forever, pauses the moment it leaves the viewport.

Close

No buttons, no controls, no progress bar — the frame is the whole widget.

Motion

Same widget as the hero above. Four switches turned off, nothing else.

Style · Button — Normal vs Active

Same widget.
Different skin.

01
Normal

Text Color, Background, Border and Radius — a 1px ghost pill on 6% white.

02
Active

A second set of the same fields. Solid fill, white label, border gone.

03
Hover

Elementor’s own hover animation list is on the button — this one is “grow”.

Hover Video

Any source. Any shape.

YouTube, Vimeo, Dailymotion or a file from the library — eight aspect ratios, buttons or tabs, controls on or off, and a single Accent Color that drives the active button, both progress bars and the player highlight.

FAQ
Frequently asked

Hover Video

Straight answers about what this one does, where it fits in a real build, and what it costs you to ship.

Still stuck?

Read the documentation for this one, or write to us — a human answers inside a business day.

Can I make a video play on hover in Elementor?

Yes — that is the whole job of the Hover Video widget in Sky Addons for Elementor. A row of labelled buttons sits under the player, and moving the pointer onto one starts that clip immediately; a thin progress bar per video tracks how far it has run, and progress can also be drawn inside the button itself.

Does the sound play when a hover video starts?

No — every clip is created muted, deliberately, because a video that blares audio at a passing cursor is hostile. Visitors can raise the volume themselves if you leave the volume control switched on. Treat Hover Video as a silent preview surface and put anything spoken in a full player elsewhere.

Which video sources does the Hover Video widget accept?

YouTube and Vimeo links, a video file picked from your media library, or an external file URL, and self-hosted rows take a poster image of your own. The bundled player only handles those three, so a link from another video platform will produce an empty frame even though the field accepts it.

Does Hover Video work on phones, where there is no hover?

Yes — the widget detects a device with no hover capability and switches its whole interaction to taps. One tap on a button plays that video, a second tap on the active one pauses it, and the usual rule of pausing when the pointer leaves the frame is skipped, since there is no pointer to leave.

Can the first video start playing automatically?

Yes, and it starts muted. Autoplay First Video is a switch, and it forces mute because browsers block unmuted autoplay outright — a silent start is the only kind that reliably works. Pair it with the Loop switch and the opening clip runs continuously until a visitor picks another.

Are the Hover Video switch buttons keyboard accessible?

Yes. Each button carries a button role and its own tab stop, and the widget listens for Enter and Space, so someone tabbing through the page can switch videos without a mouse. Keyboard users get the same behaviour as a click rather than being locked out of a hover-only control.

Can I change the shape of the video frame?

Yes — eight aspect ratios are offered: 1:1, 2:1, 3:2, 4:3, 8:5, 16:9, 21:9 and 9:16, with a Min Height slider on top. The footage is scaled to fill the frame and cropped rather than letterboxed, so choose the ratio closest to your source or you will lose the edges.

Does a Hover Video widget load every clip on page load?

No. Players are created lazily — one is built the first time its video is actually hovered or tapped, so a five-clip widget does not open five YouTube iframes when the page renders. Only the players a visitor touches are ever constructed, which keeps the initial load close to a static image.

Does the Hover Video widget need Elementor Pro?

No — it is a Sky Addons Pro widget and runs on free Elementor with any theme. Playback uses the Plyr player bundled inside the plugin, and both its script and stylesheet are registered against the widget, so they load only on pages where a Hover Video actually appears.

Should I use Hover Video for my main marketing video?

No — it is muted and it pauses the moment the pointer leaves the frame, which is right for showreels, product demos and portfolio previews but wrong for a video someone should watch through with sound. For that, use the Video Player widget, which keeps audio, a poster and a persistent control bar.