Powerful and customizable React video player components built for modern applications and websites. These video players are built using React and styled with Tailwind CSS.
Installation
You can add this video player component using our CLI or manually:
npx untitledui@latest add video-player
Video player examples
Below are examples and variations of this video player component:
API reference
VideoPlayer
Import VideoPlayer from @/components/base/video-player/video-player. Renders a <div> element.
FAQs
Please refer to our frequently asked questions page for more.
No, the video player is a PRO component. Sign in with npx untitledui@latest login, or pass your key with --license, before running npx untitledui@latest add video-player.
The player supports "sm", "md" and "lg" through the size prop. The default is "md". "sm" shows only the play, mute and fullscreen buttons, "md" adds the time and progress bar, and "lg" also adds a volume slider and a playback speed button that cycles from 1x to 2x.
The player has no fixed size, so set it with className. The examples use classes like aspect-video w-full max-w-140 overflow-hidden rounded-lg, and the video and thumbnail inherit the border radius.
Pass thumbnailUrl and thumbnailAlt. The thumbnail covers the video with a play button until it's clicked, and appears again when the video ends. Set showThumbnailOverlay to add a subtle dark overlay on the image.
The player renders a native video element with a single source. Pass a direct link to the video file in src and its MIME type in type, which defaults to "video/mp4". YouTube or Vimeo page URLs won't play.
Yes, pass a ref typed as VideoPlayerRef. It exposes play() and pause(), a paused getter, and videoElement for direct access to the underlying HTMLVideoElement.
When the video is focused, Space or K toggles playback, M toggles mute, the up and down arrows change the volume in 10% steps, and the left and right arrows seek 10 seconds. Double-click the video to toggle fullscreen.