Interface

Theming

The control bar lives in a shadow root, so ordinary selectors cannot reach inside it. That is deliberate — nothing on your page can accidentally break the player. There are three supported ways in: custom properties, ::part(), and your own icons.

Live

Applieddefault

What the buttons setjs

const sunset = {
  '--fideo-accent': '#ff9d5c',
  '--fideo-track-fill': '#ffd0a8',
  '--fideo-buffer-color': 'rgba(255, 208, 168, 0.45)',
  '--fideo-radius': '14px',
};

mountFideo(el, { cssVars: sunset });

Custom properties

Every variable is declared on the .fideo wrapper and inherits through the shadow boundary, which is why setting one in ordinary CSS reaches the controls.

Colour

Property	Default	Affects
--fideo-accent	#46d9a7	Hover and focus colour, active playback rate, focus ring
--fideo-bg	transparent	Wrapper background behind the media
--fideo-control-bg	transparent	Control bar background
--fideo-control-color	#ffffff	Icons and slider thumbs
--fideo-muted-color	rgba(255,255,255,.92)	Time labels
--fideo-track	rgba(255,255,255,.46)	Unplayed part of the timeline
--fideo-track-fill	rgba(255,255,255,.9)	Played part of the timeline
--fideo-buffer-color	rgba(255,255,255,.68)	Buffered band between played and unplayed

Size and shape

Property	Default	Affects
--fideo-radius	8px	Wrapper corners
--fideo-track-size	5px	Timeline and volume slider thickness
--fideo-thumb-size	13px	Slider handle diameter
--fideo-button-size	26px	Button hit area
--fideo-button-radius	4px	Button corners
--fideo-icon-size	17px	Icon dimensions
--fideo-gap	10px	Spacing between controls

Four places to set them

Globally, in your stylesheetcss

.fideo {
  --fideo-accent: #ff9d5c;
  --fideo-radius: 14px;
}

Per player, with a classcss

.fideo.brand-dark { --fideo-control-color: #0b0e13; }

Per player, in markup — six shorthands existhtml

<video data-fideo data-fideo-accent="#ff6f61" data-fideo-radius="0"></video>

Per player, in JavaScript — any propertyjs

mountFideo(el, {
  cssVars: { '--fideo-accent': '#ff6f61', '--fideo-gap': '16px' },
});

The markup shorthands only cover six properties — accent, control-bg, control-color, track, track-fill and radius. Everything else goes through CSS or cssVars.

::part()

When a variable is not enough, each control is exposed as a shadow part on the .fideo__controls host, which you can target from ordinary CSS.

Pill buttons, taller timeline::part()

The CSS applied abovecss

.fideo__controls::part(play-button),
.fideo__controls::part(fullscreen-button) {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
}

.fideo__controls::part(timeline) { height: 22px; }

.fideo__controls::part(settings-menu) {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.3);
}

Part	Element
play-button	Play / pause toggle
mute-button	Mute / unmute toggle
volume-slider	Volume range input
timeline	Seek bar range input
current-time	Elapsed time text
duration	Duration text
time-separator	The slash between them
settings-button	Playback-rate toggle
settings-menu	Rate menu container
speed-button	An individual rate option
fullscreen-button	Fullscreen toggle

::part() cannot select descendants. You can style the part itself, but not elements inside it — ::part(play-button) svg will not match. Size icons with --fideo-icon-size instead.

Styling the wrapper

Everything outside the shadow root is plain CSS. The wrapper carries state classes you can hook into.

Class	Present when
.fideo	Always — the generated wrapper
.fideo--html5 · --youtube · --vimeo · --wistia	Per provider
.fideo--background	Background mode
.fideo--no-controls	Controls disabled
.is-ready	Mounted
.is-playing · .is-paused	Playback state
.is-user-active	Recent pointer or keyboard activity
.has-poster · .is-poster-visible	A poster exists / is currently shown
.is-fullscreen	This player owns fullscreen
.fideo__media	On the video, iframe or wistia-player element
.fideo__poster	On the poster overlay image

Add your own classhtml

<video data-fideo data-fideo-class="rounded-hero"></video>

Replacing the icons

Pass inline SVG strings. Anything you leave out keeps its default.

Custom play, pause and fullscreen iconsicons option

Triangle and bars instead of the defaultsjs

mountFideo(el, {
  icons: {
    play: '<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>',
    pause: '<svg viewBox="0 0 24 24"><path d="M7 5h4v14H7zM13 5h4v14h-4z"/></svg>',
  },
});

Key	Used for
play	Play button, paused state
pause	Play button, playing state
volume	Volume above 50%
volumeLow	Volume at or below 50%
muted	Muted, or volume at zero
settings	Playback-rate menu
fullscreen	Enter fullscreen
fullscreenExit	Leave fullscreen

Use fill="currentColor" or stroke="currentColor" so icons inherit --fideo-control-color and the accent on hover.
Add aria-hidden="true" — the button already carries the accessible name.
Sizing comes from --fideo-icon-size, so omit width and height on the SVG.

Icon strings are inserted as HTML. Treat them as code you control and never build them from user input.