# Video Player Pro

> The VideoPlayerPro component is a fully featured, modern video player built with React and TypeScript, designed for a seamless user experience. It supports play, pause, and restart controls, a smoothly updating progress timeline, volume control with an interactive slider, and a settings popover for playback speed and captions. The player also includes fullscreen functionality and a responsive, sleek UI with a semi-transparent backdrop that blends with the video content. Leveraging Framer Motion for smooth animations and Radix UI components for accessibility, this component ensures both functionality and aesthetic appeal, making it ideal for embedding high-quality video experiences in web applications.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/video-player-pro

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/video-player-pro?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt