A modern, customizable React video player component with advanced controls, keyboard shortcuts, fullscreen, and picture-in-picture support.

ReactNextPlayer Demo

• 🎛️ Customizable player UI with color theming
• 🔄 Ambient glow effect like YouTube Videos (Dynamic Glow around the video while playing)
• ⏯️ Play / Pause with overlay and controls
• ⏪ Skip backward & ⏩ skip forward (10s)
• 🔊 Volume control with mute/unmute
• ⌨️ Keyboard shortcuts (space, arrows, volume)
• 🖼️ Picture-in-Picture support
• 🖥️ Fullscreen toggle
• 🕒 Progress bar with seek & scrub
• 📱 Responsive design (mobile-friendly)
• ♿ Accessible with keyboard navigation & ARIA labels

npm install reactnextplayer

or with Yarn:

yarn add reactnextplayer

"use client";
import React from "react";
import {ReactNextPlayer} from "reactnextplayer";

export default function App() {
  return (
    <div style={{ maxWidth: "800px", margin: "0 auto" }}>
      <ReactNextPlayer
        src="/sample-video.mp4"
        poster="/poster-image.jpg"
        autoplay={false}
        controls
        color="#ff4757"
        ambientGlow={true}
        onPlay={() => console.log("Video started")}
        onPause={() => console.log("Video paused")}
        onEnded={() => console.log("Video ended")}
        onTimeUpdate={(t) => console.log("Current time:", t)}
      />
    </div>
  );
}

The player uses CSS variables for theming. Pass a color prop to change the theme.

<ReactNextPlayer
  src="/video.mp4"
  color="#1e90ff" // Blue themed player
/>

The player is responsive and adapts to different screen sizes:

• Desktop → Full controls with hover animations
• Tablet → Compact layout
• Mobile → Simplified controls & smaller progress bar

• ✅ Customizable control layouts
• ⏳ Subtitles / captions support
• ⏳ Playlist & chapters
• ⏳ HLS / DASH streaming support

MIT License © 2025 \Rakibur Rahaman