How to Play a Video on Hover Using React and TypeScript

Introduction

Have you ever visited a website where a video starts playing the moment you hover over it? This simple yet engaging effect is widely used in modern web applications to enhance user experience. In this article, I will guide you through implementing a “play video on hover” feature using React and TypeScript.

By the end of this tutorial, you’ll have a reusable React component that seamlessly plays a video when hovered and resets when the cursor leaves.

Why Use Hover-to-Play for Videos?

Implementing a hover-to-play feature improves user engagement and provides an interactive way to showcase video content without requiring a click. Some common use cases include:

✅ E-commerce product previews ✅ Social media video previews ✅ Portfolio or showcase websites ✅ News and media websites

Step 1: Setting Up a React Project with Vite

We’ll use Vite for a faster and more modern development experience. If you haven’t already set up a React + TypeScript project with Vite, use the following commands:

npm create vite@latest video-hover-app -- --template react-ts
cd video-hover-app
npm install
npm run dev

This sets up a React project with TypeScript using Vite, giving you fast startup and hot module replacement out of the box.

Step 2: Creating the Video Hover Component

Now, let’s create a reusable VideoHover.tsx component that plays a video on hover and resets when the cursor leaves.

import React, { useRef } from "react";

interface VideoHoverProps {
  src: string;
  poster?: string;
  className?: string;
  onClick?: () => void;
  muted?: boolean;
}

const VideoHover: React.FC<VideoHoverProps> = ({
  src,
  poster,
  className,
  onClick,
  muted = true,
}) => {
  const videoRef = useRef<HTMLVideoElement>(null);

  const handleMouseEnter = () => {
    if (videoRef.current) {
      videoRef.current.muted = muted;
      videoRef.current.play();
    }
  };

  const handleMouseLeave = () => {
    if (videoRef.current) {
      videoRef.current.pause();
      videoRef.current.currentTime = 0;
    }
  };

  return (
    <video
      ref={videoRef}
      src={src}
      poster={poster}
      className={className}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      onClick={onClick}
      aria-label="Hover to play video"
    />
  );
};

export default VideoHover;

Key Features of This Component:

✅ Uses useRef to access the video element ✅ Plays the video on onMouseEnter ✅ Pauses and resets the video on onMouseLeave ✅ Supports an optional muted prop to control audio ✅ Supports poster images for better UI/UX

Step 3: Using the Component in Your App

Now, import and use the VideoHover component inside your App.tsx file:

import React from 'react';
import VideoHover from './VideoHover';
import './App.css';

const App: React.FC = () => {
  return (
    <div className="App">
      <h1>Hover to Play Video</h1>
      <VideoHover
        src="https://www.example.com/sample-video.mp4"
        poster="https://www.example.com/sample-thumbnail.jpg"
        className="video-thumbnail"
      />
    </div>
  );
};

export default App;

Step 4: Adding Some Style

.video-thumbnail {
  width: 300px; /* You can customize this width as needed */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.video-thumbnail:hover {
  transform: scale(1.05);
}

Final Thoughts

With just a few lines of code, we’ve successfully implemented a play-on-hover video feature using React and TypeScript. This reusable component can be easily integrated into various applications to improve user experience.

Next Steps:

• Customize it further with play/pause icons
• Add a click-to-play option for mobile devices
• Implement lazy loading for better performance

If you found this tutorial helpful, feel free to like, share, and comment. Happy coding! 🚀