Video Player Demo

Standard Video Player

Full-featured player with custom controls: Play/Pause, Volume, Progress bar, Fullscreen

Features:

✓ Custom overlay controls (appear on hover)
✓ Play/Pause toggle (click video or spacebar)
✓ Volume/Mute control (M key)
✓ Seekable progress bar (click to jump)
✓ Time display (current/duration)
✓ Fullscreen support (F key)
✓ Keyboard controls (Space, M, F, Arrow keys)
✓ Loading indicator

Hero Video Player (Autoplay Muted)

Cinematic 21:9 aspect ratio, autoplay muted with loop - ideal for hero sections

Hero Configuration:

✓ Autoplay muted (browser-friendly)
✓ Loops automatically
✓ Click to unmute/restart
✓ Cinematic 21:9 aspect ratio
✓ Controls appear on hover

Multiple Players on Same Page

Each player operates independently

Gondola Trailer

Fiddlesticks Trailer

Technical Specifications

Browser Support

✓ Chrome (desktop & mobile)
✓ Firefox (desktop & mobile)
✓ Safari (desktop & iOS)
✓ Edge (Chromium)
✓ Modern mobile browsers

Video Format

✓ MP4 container (H.264)
✓ AAC audio codec
✓ Progressive download
✓ Metadata preloading
✓ Poster frame support

Custom Controls

✓ Play/Pause (center overlay)
✓ Volume/Mute button
✓ Progress bar (seekable)
✓ Time display (MM:SS)
✓ Fullscreen toggle
✓ Loading spinner

Accessibility

✓ ARIA labels on controls
✓ Keyboard navigation
✓ Focus indicators
✓ Screen reader support
✓ Semantic HTML5

Usage Examples

Import the Macro:

{% import "macros/videoPlayer.njk" as video %}

Standard Player:

{{ video.videoPlayer(
  src="/path/to/video.mp4",
  poster="/path/to/poster.jpg",
  aspectRatio="16/9"
) }}

Hero Player (Autoplay):

{{ video.heroVideoPlayer(
  src="/path/to/video.mp4",
  poster="/path/to/poster.jpg",
  aspectRatio="21/9"
) }}

All Parameters:

{{ video.videoPlayer(
  src="/video.mp4",          // Required: Video URL
  poster="/poster.jpg",       // Optional: Poster image
  autoplay=false,             // Optional: Autoplay (muted)
  controls=true,              // Optional: Show controls
  loop=false,                 // Optional: Loop video
  aspectRatio="16/9",         // Optional: Aspect ratio
  label="Video description"   // Optional: Accessible label
) }}

Keyboard Shortcuts

Playback:

Space or K - Play/Pause
M - Mute/Unmute
F - Fullscreen

Seeking:

← - Rewind 5 seconds
→ - Forward 5 seconds

Design System Alignment

Minimalist Style:

✓ White icons on transparent overlay
✓ Subtle hover states (white/20 background)
✓ Clean, borderless design
✓ Smooth 200-300ms transitions
✓ Backdrop blur effects
✓ Drop shadows for depth
✓ Monochrome color scheme
✓ Focus rings for accessibility