Embed YouTube videos with proper styling and responsive design, or use the composable HTML5 video player built on media-chrome for direct video files. Supports full keyboard navigation, screen reader accessibility, and seamless integration with shadcn/ui theming.
YouTube Embeds (Recommended)
For YouTube videos, use an iframe embed with responsive aspect ratio and proper styling. This is the recommended approach for most use cases as it leverages YouTube's CDN and built-in features.
Common YouTube URL parameters:
autoplay=1- Start playing automatically (must be muted)mute=1- Mute the videoloop=1- Loop the videocontrols=0- Hide player controlsmodestbranding=1- Minimal YouTube brandingstart=10- Start at 10 secondsend=60- End at 60 seconds
HTML5 Video Player
For direct video files (MP4, WebM, OGG), use the VideoPlayer component with custom controls.
Basic HTML5 Player
A simple video player with essential controls: play button, progress bar, and time display.
HTML5 Full Controls
All available controls including seek buttons, volume controls, and mute button.
Component API (HTML5 Video Player)
VideoPlayer
The main wrapper component that provides context for all child components.
| Prop | Type | Description |
|---|---|---|
className | string | Custom CSS classes |
style | CSSProperties | Custom inline styles |
children | ReactNode | Child components (VideoPlayerContent and VideoPlayerControlBar) |
VideoPlayerContent
The video element that displays the media content.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | Video source URL |
slot | string | - | Should be set to "media" for media-chrome integration |
autoPlay | boolean | false | Start playing automatically |
loop | boolean | false | Loop the video |
muted | boolean | false | Mute the audio |
preload | "none" | "metadata" | "auto" | "metadata" | Preload strategy |
controls | boolean | false | Show native browser controls (not recommended when using custom controls) |
poster | string | - | Image to show before video plays |
crossOrigin | "anonymous" | "use-credentials" | "" | - | CORS setting for cross-origin videos |
className | string | - | Custom CSS classes |
VideoPlayerControlBar
Container for player controls.
| Prop | Type | Description |
|---|---|---|
className | string | Custom CSS classes |
children | ReactNode | Control components |
VideoPlayerPlayButton
Play/Pause toggle button.
| Prop | Type | Description |
|---|---|---|
className | string | Custom CSS classes |
VideoPlayerSeekBackwardButton
Button to seek backward by a set interval (default 10 seconds).
| Prop | Type | Description |
|---|---|---|
className | string | Custom CSS classes |
seekOffset | number | Seconds to seek backward |
VideoPlayerSeekForwardButton
Button to seek forward by a set interval (default 10 seconds).
| Prop | Type | Description |
|---|---|---|
className | string | Custom CSS classes |
seekOffset | number | Seconds to seek forward |
VideoPlayerTimeRange
Interactive progress bar for seeking through the video.
| Prop | Type | Description |
|---|---|---|
className | string | Custom CSS classes |
VideoPlayerTimeDisplay
Displays current time and optionally total duration.
| Prop | Type | Description |
|---|---|---|
className | string | Custom CSS classes |
showDuration | boolean | Show total duration alongside current time |
VideoPlayerMuteButton
Mute/Unmute toggle button.
| Prop | Type | Description |
|---|---|---|
className | string | Custom CSS classes |
VideoPlayerVolumeRange
Interactive volume slider.
| Prop | Type | Description |
|---|---|---|
className | string | Custom CSS classes |