Hover Preview Player

A video player that plays on mouse hover and pauses when the mouse leaves. Shows only a mute button and progress bar. Ideal for video thumbnails and preview cards (Netflix/YouTube style).

Live Example

Hover over the video to start playback:

Basic Implementation

import { Video } from '@rixl/videosdk-react';

<Video
  id="your-video-id"
  theme="hover"
/>

How It Works

Video is paused by default — the autoPlay prop is ignored in hover theme
Playback starts on mouse enter and pauses on mouse leave
A poster image (with thumbhash placeholder) overlays the video when idle
Only a mute button (top-right) and progress bar (bottom) are shown

The hover theme is designed for desktop interactions. On touch devices, users tap to play/pause instead.

Use Cases

Video Thumbnail Grid

Create a grid of video previews that play on hover:

import { Video } from '@rixl/videosdk-react';

function VideoGrid({ videos }) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {videos.map(video => (
        <Video
          key={video.id}
          id={video.id}
          className="w-full aspect-video rounded-lg"
          theme="hover"
          loop={true}
        />
      ))}
    </div>
  );
}

Content Card with Hover Preview

import { Video } from '@rixl/videosdk-react';

function ContentCard({ videoId, title, description }) {
  return (
    <div className="rounded-xl overflow-hidden shadow-lg">
      <Video
        id={videoId}
        className="w-full aspect-video"
        theme="hover"
        loop={true}
      />
      <div className="p-4">
        <h3 className="font-bold text-lg">{title}</h3>
        <p className="text-gray-600 text-sm">{description}</p>
      </div>
    </div>
  );
}

When to Use

Use Hover Theme For:

Video thumbnail grids and galleries
Content cards with video previews
Product showcases
Portfolio displays

Use Standard Theme Instead:

Videos that need full playback controls
Long-form content where users control playback
Mobile-first experiences

Need full controls? Use the Standard Player instead.

Video: Hover Preview