Video Players
Video player components using existing sparkles-media-gallery.js with built-in video support.
🎥 Video Player Demonstrations
Video components using existing sparkles-media-gallery.js with built-in video support
Video Gallery Components
Video Gallery
Using sparkles-media-gallery.js with video support for YouTube, Vimeo, and MP4 files.
Product Video Player
Product Demo Video
Standard HTML5 video with native controls, perfect for product demonstrations.
Video Integration Patterns
Inline Video
Autoplay muted video for background effects
Video Thumbnail
Click to play video in modal
Video Playlist
Introduction
2:45
Features
5:12
Tutorial
8:30
Accessibility Features
Video with Captions
Keyboard Navigation
- • Space: Play/Pause
- • Arrow Keys: Seek forward/backward
- • M: Mute/Unmute
- • F: Fullscreen
Screen Reader Support
- • ARIA labels for all controls
- • Live regions for status updates
- • Descriptive button text
- • Focus management
📝 Usage Examples
<div x-data="SparklesMediaGallery()" x-init="init()">
<div data-media-type="video"
data-video-provider="youtube"
data-video-id="VIDEO_ID"
@click="openMedia(0)">
<img src="thumbnail.jpg" alt="Video">
</div>
</div>
<video controls poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<track src="captions.vtt" kind="captions" srclang="en">
</video>
<video autoplay muted loop playsinline>
<source src="background.mp4" type="video/mp4">
</video>
⚡ Performance & Accessibility
Video Player Best Practices
- 🎥 Multiple video formats (MP4, WebM) for browser compatibility
- ⚡ Lazy loading and optimized thumbnails for fast page loads
- ♿ Captions, transcripts, and keyboard controls for accessibility
- 📱 Touch-friendly controls and responsive video sizing