Hover Scrub Video

Motion-style video card. IDLE: a center play button; on hover, mute + expand controls and a vertical playhead — moving the cursor horizontally hover-scrubs the timeline (muted). Click play for real-time playback with sound; hover then shows a pause button wrapped in a circular progress ring. Playback continues when the cursor leaves the card.

Video card (3:4 portrait)

Hover and sweep left↔right to scrub. Click the center play to start playback with audio; hover to pause. Mute toggles audio live; expand fires onExpand (wire it to a drawer / lightbox).

Detail frame with full screen

allowFullscreen adds a full-screen toggle beside mute. The player itself goes full screen, so scrub, play/pause and mute come with it; Escape or the toggle exits. On an iPhone it opens the native video player. Use it where the frame is small, like the ad library side panel.

Without expand affordance

Omit onExpand to hide the expand button (e.g. surfaces with no drawer).