Hover Video Player

Docs

Hover Video Player

A video player component that plays on hover with advanced features like mobile support, picture-in-picture, and custom overlays.

Open in v0

Hover video player

newcopy.ai

"use client"
 
import React from "react"
import { motion } from "framer-motion"
 
import { cn } from "@/lib/utils"
 
import { GradientHeading } from "../ui/gradient-heading"
import { HoverVideoPlayer } from "../ui/hover-video-player"
 
export function HoverVideoPlayerDemo() {
  return (
    <div className="flex flex-col gap-12 py-12 w-full h-full items-center justify-center">
      <div className="text-center">
        <GradientHeading>Hover video player</GradientHeading>
      </div>
      <motion.div
        initial={{ maxWidth: "24rem" }} // 96 in rem
        whileHover={{ maxWidth: "100%" }}
        transition={{
          duration: 0.5,
          ease: [0.32, 0.72, 0, 1], // Custom easing for smooth animation
        }}
        className={cn(
          "group relative flex flex-col overflow-hidden rounded-lg w-full h-full",
          "bg-white shadow-sm ring-1 ring-black/5",
          "data-[dark]:bg-stone-800 data-[dark]:ring-white/15"
        )}
      >
        <HoverVideoPlayer
          videoSrc="https://player.vimeo.com/video/1037289858"
          thumbnailSrc="/placeholders/newcopy-thumbnail.png"
          enableControls
          style={{
            width: "100%",
            maxWidth: "100vw",
            aspectRatio: "16/9",
          }}
        />
      </motion.div>
 
      <a href="https://www.newcult.co" target="_blank">
        newcopy.ai
      </a>
    </div>
  )
}

Installation

npx shadcn@latest add https://cult-ui.com/r/hover-video-player.json

Usage

import { HoverVideoPlayer } from "@/components/ui/hover-video-player"

export default function Example() {
  return (
    <HoverVideoPlayer
      videoSrc="/demo-video.mp4"
      thumbnailSrc="/demo-thumbnail.jpg"
    />
  )
}

Props

Prop	Type	Default	Description
videoSrc	`string`	`required`	URL of the video to play
thumbnailSrc	`string`	-	URL of the thumbnail image
hoverOverlay	`ReactNode`	-	Custom overlay shown while hovering
pausedOverlay	`ReactNode`	-	Custom overlay shown when paused
loadingOverlay	`ReactNode`	-	Custom overlay shown while loading
playbackStartDelay	`number`	`0`	Delay before playing video on hover (ms)
restartOnPaused	`boolean`	`false`	Reset video position when paused
enableControls	`boolean`	`false`	Show playback controls
muted	`boolean`	`true`	Start video muted
loop	`boolean`	`true`	Loop video playback
cropTop	`number`	`0`	Percentage to crop from top
cropBottom	`number`	`0`	Percentage to crop from bottom

Examples

Basic Player

<HoverVideoPlayer
  videoSrc="/demo-video.mp4"
  thumbnailSrc="/demo-thumbnail.jpg"
/>

With Controls

<HoverVideoPlayer
  videoSrc="/demo-video.mp4"
  thumbnailSrc="/demo-thumbnail.jpg"
  enableControls
/>

With Custom Overlays

import { PlayIcon } from "lucide-react"
 
import { Spinner } from "@/components/ui/spinner"
 
;<HoverVideoPlayer
  videoSrc="/demo-video.mp4"
  thumbnailSrc="/demo-thumbnail.jpg"
  pausedOverlay={<PlayIcon className="h-12 w-12" />}
  loadingOverlay={<Spinner />}
  hoverOverlay={<div className="text-white">Now Playing</div>}
/>

With Cropping

<HoverVideoPlayer
  videoSrc="/demo-video.mp4"
  thumbnailSrc="/demo-thumbnail.jpg"
  cropTop={10}
  cropBottom={10}
/>

Features

Lazy loading with Intersection Observer
Mobile touch support with tap-to-play
Picture-in-Picture mode
Custom overlay support for different states
Thumbnail support with smooth transitions
Playback controls with volume and progress
Responsive design that works across devices
Video cropping support for custom positioning
Automatic pause when out of viewport

3D Carousel Bg Media Hero