Theming

Override CSS custom properties on any ancestor element to theme the player. There is no JS theming API.

/* Scope to a specific page section */
.my-page {
  --eve-accent: #00b4d8; /* progress bar, play-progress bar, active states */
  --eve-control-bg: rgba(0, 0, 0, 0.7);
  --eve-control-color: #fff;
  --eve-radius: 8px;
}

Property	Default	Used for
--eve-accent	#e00	Played-progress bar, hover states, active quality/PiP icon
--eve-control-bg	rgba(0, 0, 0, 0.55)	Control bar and popup menu backgrounds
--eve-control-color	#fff	Control bar and menu text / icon colour
--eve-radius	4px	Corner radius on menus and popups
--eve-bar-height	42px	Control bar height
--eve-progress-dot-size	12px	Diameter of the progress-bar scrubber dot (showProgressDot)
--eve-volume-dot-size	10px	Diameter of the volume-bar handle dot (showVolumeDot)
--eve-transition	0.18s ease	Shared hover / state transition timing
--eve-chapter-gap	2px	Width of the gap between chapter segments on the progress bar (chapterMarkers)
--eve-pip-width	340px	Width of the floating PiP overlay
--eve-pip-radius	10px	Corner radius of the floating PiP overlay
--eve-pip-shadow	0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08)	Drop shadow of the floating PiP overlay

note

Bookmark markers on the progress bar are currently a fixed colour (not themeable via --eve-accent) to keep them visible against the accent-coloured played-progress bar.

Progress and volume handles

Both sliders are drawn as a plain bar by default. The round handle ("dot") at the head of the filled portion is opt-in, per bar, and set at construction time:

const player = new EvePlayer(container, {
  showProgressDot: true, // dot on the progress bar
  showVolumeDot: true,   // dot on the volume bar
});

Each dot is a real element (not an icon-font glyph), so it stays centred on its bar at any height, including while the progress bar thickens on hover. Size them with --eve-progress-dot-size / --eve-volume-dot-size; their colours follow --eve-accent (progress) and --eve-control-color (volume).

DOM targeting

Video.js wraps the <video> in its own root element, which also carries the class video-js, one level below the container you pass. State classes (vjs-paused, vjs-user-active, …) sit on that inner element: target container .video-js from your CSS, not container itself.