Configure

Options reference

The same options object is accepted by every entry point. Nearly all of them have a data-fideo-* equivalent listed on Data attributes.

Try them

Each toggle destroys the player and mounts it again with the option changed, since options are fixed at mount.

Mounted with—

Playback

Option	Type	Default	What it does
autoplay	boolean	false	Starts playback once the player is mounted. Subject to browser autoplay policy — pair it with `muted`.
muted	boolean	false	Starts muted. Forced on when `background` is set.
loop	boolean	false	Repeats on end. For YouTube this also adds the `playlist` parameter the API requires.
playsInline	boolean	true	Keeps playback inline on iOS rather than going fullscreen.
volume	number	1	Initial volume, `0`–`1`. Clamped.
playbackRates	number[]	[0.5, 1, 1.25, 1.5, 2]	Rates offered in the settings menu.
preload	'none' \| 'metadata' \| 'auto'	'metadata'	Maps to the `<video>` preload attribute. HTML5 only.

Loading

Option	Type	Default	What it does
lazy	boolean	true for iframes	Defers the provider SDK and the embed until the player nears the viewport. `false` for `<video>`.
lazyRootMargin	string	'800px 0px'	The `IntersectionObserver` margin that decides how early loading starts.
provider	'auto' \| 'html5' \| 'youtube' \| 'vimeo' \| 'wistia'	'auto'	Skips URL inference. See detection.
disabledProviders	FideoProviderName[]	[]	Guarantees those SDKs are never loaded. Mounting a disabled provider throws.
selector	string	'[data-fideo]'	What `initFideo()` queries. Ignored by the single-player entry points.

Sources and posters

Option	Type	Default	What it does
sources	string \| { desktop?, tablet?, mobile? }	{}	A string is treated as `{ desktop }`. Swapped on resize. See Responsive media.
posters	string \| { desktop?, tablet?, mobile? }	{}	Rendered as an overlay image that hides on play.
breakpoints	{ mobile?, tablet? }	{ mobile: 767, tablet: 1024 }	Widths in pixels that decide which source and poster apply.

Layout and behaviour

Option	Type	Default	What it does
background	boolean	false	Cover-fills the container and forces `autoplay`, `muted`, `loop` and `playsInline`. Also turns controls off unless you ask for them.
backgroundAspectRatio	number \| string	16 / 9	Source aspect ratio used for cover maths. Accepts `1.777`, `'16:9'` or `'16/9'`.
viewport	false \| 'play' \| 'pause' \| 'play-pause'	false	Plays and/or pauses as the player scrolls in and out of view. Background players default to `'play-pause'`.
viewportThreshold	number	0.35	How much of the player must be visible to count as in view.
controls	boolean	true, or false in background mode	Renders the control bar. When off, no click-to-toggle target is created either.
controlVisibility	Partial<FideoControlVisibility>	all true	Per-control switches — see below.

controlVisibility

Every key defaults to true. Hiding a control removes it from the DOM rather than hiding it with CSS.

A minimal barjs

initFideo({
  controlVisibility: {
    play: true,
    timeline: true,
    currentTime: false,
    duration: false,
    volume: true,
    settings: false,
    fullscreen: true,
  },
});

Appearance

Option	Type	Default	What it does
cssVars	Record<string, string>	{}	Custom properties set inline on the wrapper. See Theming.
className	string	''	Extra class added to the generated `.fideo` wrapper.
icons	FideoIcons	{}	Inline SVG strings replacing any of the built-in icons.
injectStyles	boolean	true	Adds the wrapper stylesheet to `<head>` on first mount. Set `false` if you link `dist/fideo.css` yourself.

Reading what was resolved

player.options holds the fully-resolved configuration — defaults applied, attributes merged, every optional field filled in. It is the quickest way to check why a player is behaving the way it is.

Debugging a playerjs

const player = mountFideo(el);
console.log(player.options);
// { provider: 'html5', autoplay: false, muted: false, volume: 1,
//   breakpoints: { mobile: 767, tablet: 1024 }, … }