Theming & Customization¶

VaultStream's player is designed for white-label deployment. Every visual element can be customized through CSS variables, configuration options, and template overrides.

Quick Theming¶

Set VaultStream's color scheme with CSS custom properties:

<style>
  :root {
    --vs-primary: #2563eb;
    --vs-primary-hover: #1d4ed8;
    --vs-background: #0f172a;
    --vs-surface: #1e293b;
    --vs-text: #e2e8f0;
    --vs-text-secondary: #94a3b8;
    --vs-border: #334155;
    --vs-accent: #38bdf8;
    --vs-error: #ef4444;
    --vs-success: #22c55e;
  }
</style>

Configuration Reference¶

VSPlayer.mount('#player', {
  // Content
  contentId: 'c_7a3b9f1d',
  jwt: '<USER_SESSION_JWT>',

  // Branding
  logoUrl: 'https://acme.corp/logo-white.svg',
  logoHeight: 32,
  brandName: 'Acme Training Portal',

  // Appearance
  theme: 'custom',         // 'dark' | 'light' | 'custom'
  accentColor: '#2563eb',
  borderRadius: 8,
  fontFamily: 'Inter, system-ui, sans-serif',

  // Player behavior
  autoplay: false,
  muted: false,
  defaultQuality: 'auto',  // 'auto' | '1080p' | '720p' | '480p' | '360p'
  preload: 'auto',

  // Controls
  showQualitySelector: true,
  showSpeedControl: true,
  showSubtitles: true,
  showAirplay: true,
  showChromecast: true,

  // Watermark (enterprise)
  watermarkText: 'ACME CORP — CONFIDENTIAL',
  watermarkOpacity: 0.08,
  watermarkPosition: 'center',

  // Callbacks
  onReady: () => console.log('Player ready'),
  onPlay: () => console.log('Playback started'),
  onPause: () => console.log('Playback paused'),
  onEnd: () => console.log('Playback complete'),
  onError: (err) => console.error('Playback error', err),
  onProgress: (pct) => {
    if (pct >= 0.9) console.log('90% complete');
  }
});

Custom Player Templates¶

For full control, override the player HTML template:

VSPlayer.mount('#player', {
  contentId: 'c_7a3b9f1d',
  jwt: '<JWT>',
  template: `
    <div class="vs-custom-container">
      <div class="vs-custom-header">
        <img src="{{logoUrl}}" height="24" />
        <span>{{brandName}}</span>
      </div>
      <div class="vs-video-wrapper">
        <video id="vs-video-element"></video>
      </div>
      <div class="vs-custom-controls">
        <button onclick="VSPlayer.play()">▶ Play</button>
        <button onclick="VSPlayer.pause()">⏸ Pause</button>
        <span>{{currentTime}} / {{duration}}</span>
        <button onclick="VSPlayer.toggleFullscreen()">⛶</button>
      </div>
    </div>
  `
});

CSS Class Reference¶

Class	Element
`.vs-player`	Root player container
`.vs-video`	Video element wrapper
`.vs-controls`	Bottom control bar
`.vs-play-button`	Play/pause toggle
`.vs-progress-bar`	Seek bar
`.vs-time-display`	Current time / duration
`.vs-volume`	Volume control
`.vs-quality-menu`	Quality selector dropdown
`.vs-speed-menu`	Playback speed dropdown
`.vs-subtitle-menu`	Subtitle/caption selector
`.vs-fullscreen`	Fullscreen toggle
`.vs-title-bar`	Top title overlay
`.vs-logo`	Brand logo
`.vs-spinner`	Loading indicator
`.vs-error`	Error overlay