Hover Preview Player

A video preview that plays automatically and reveals its controls on hover. Ideal for video thumbnails and content cards (Netflix/YouTube style).

Live Example

Hover over the video to see the control bar:

Basic Implementation

import {Video} from "@rixl/media-react";

function HoverPreview({videoId}: {videoId: string}) {
  return (
    <div className="w-full aspect-video rounded-lg overflow-hidden">
      <Video
        id={videoId}
        className="w-full h-full object-cover"
        muted={true}
        autoPlay={true}
        theme="hover"
        loop={true}
        soundDisabled={true}
      />
    </div>
  );
}

How It Works

autoPlay={true} starts playback as soon as the video can play
muted={true} and soundDisabled={true} keep the preview silent by default
theme="hover" hides the control bar until the user hovers
loop={true} lets the preview repeat without stopping

Use Cases

Video Thumbnail Grid

import {Video} from "@rixl/media-react";

function VideoGrid({videos}) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      {videos.map((video) => (
        <HoverPreview key={video.id} videoId={video.id} />
      ))}
    </div>
  );
}

function HoverPreview({videoId}: {videoId: string}) {
  return (
    <div className="w-full aspect-video rounded-lg overflow-hidden">
      <Video
        id={videoId}
        className="w-full h-full object-cover"
        muted={true}
        autoPlay={true}
        theme="hover"
        loop={true}
        soundDisabled={true}
      />
    </div>
  );
}

Content Card with Hover Preview

function ContentCard({videoId, title, description}) {
  return (
    <div className="rounded-xl overflow-hidden shadow-lg">
      <HoverPreview videoId={videoId} />
      <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 previews for:

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

Need full controls? Use the Standard Player instead.

Video: Hover Preview