Configure

Data attributes

Everything on this page configures a player without a line of JavaScript, which makes it the natural fit for CMS output and templates. Attributes are read once, when the player mounts.

Configured bymarkup only

The markup abovehtml

<video
  data-fideo
  data-fideo-src="/media/clip.mp4"
  data-fideo-poster="/media/poster.jpg"
  data-fideo-muted="true"
  data-fideo-loop="true"
  data-fideo-volume="0.4"
  data-fideo-playback-rates="1, 1.5, 2"
  data-fideo-show-settings="false"
  data-fideo-accent="#7ab8ff"
></video>

How values are parsed

Kind	Accepted	Notes
Boolean	"" · true · 1 · yes · on false · 0 · no · off	Case-insensitive. A bare attribute counts as `true`, which is why `data-fideo-muted` alone works. Anything unrecognised falls back to the default.
Number	0.4 · 30 · 1e3	Anything `Number()` accepts. Non-finite values fall back to the default.
Number list	"1, 1.5, 2"	Comma separated. Values that are not finite and positive are dropped; an empty result falls back.
Ratio	"16:9" · "16/9" · "1.777"	Both parts must be positive numbers, otherwise the default applies.

An invalid value never throws. Fideo falls back to the JavaScript option, then to the built-in default, so a bad CMS field degrades instead of breaking the page.

Core

Attribute	Option	Default
data-fideo	Marks the element for `initFideo()` and auto-init	—
data-fideo-provider	provider	auto
data-fideo-class	className	''

Playback

Attribute	Option	Default
data-fideo-autoplay	autoplay	false
data-fideo-muted	muted	false
data-fideo-loop	loop	false
data-fideo-playsinline	playsInlinedata-fideo-plays-inline also works	true
data-fideo-volume	volume	1
data-fideo-playback-rates	playbackRates	0.5, 1, 1.25, 1.5, 2
data-fideo-preload	preload	metadata

Loading

Attribute	Option	Default
data-fideo-lazy	lazy	true for iframes
data-fideo-lazy-root-margin	lazyRootMargin	800px 0px

data-fideo-lazy-src is written by Fideo while an embed waits to load. It holds the URL taken off src and is removed once the player upgrades — do not set it yourself.

Sources and posters

Attribute	Applies to
data-fideo-src	Desktop source, and the fallback for every width
data-fideo-src-desktop	Desktop source — wins over `data-fideo-src`
data-fideo-src-tablet	Tablet source
data-fideo-src-mobile	Mobile source
data-fideo-poster	Desktop poster, and the fallback for every width
data-fideo-poster-desktop	Desktop poster — wins over `data-fideo-poster`
data-fideo-poster-tablet	Tablet poster
data-fideo-poster-mobile	Mobile poster
data-fideo-breakpoint-mobile	Mobile breakpoint in pixels — default `767`
data-fideo-breakpoint-tablet	Tablet breakpoint in pixels — default `1024`

Layout and behaviour

Attribute	Option	Default
data-fideo-background	background	false
data-fideo-background-aspect-ratio	backgroundAspectRatio	16:9
data-fideo-viewport	viewportplay · pause · play-pause · none	false
data-fideo-viewport-threshold	viewportThreshold	0.35
data-fideo-controls	controls	true

data-fideo-viewport also accepts a plain boolean. true means play-pause; false or none switches it off.

Showing and hiding controls

Attribute	Hides
data-fideo-show-play	Play/pause button
data-fideo-show-timeline	Seek bar
data-fideo-show-current-time	Elapsed time
data-fideo-show-duration	Total duration
data-fideo-show-time	Both time labels at once — a shorthand the two above override
data-fideo-show-volume	Mute button and volume slider
data-fideo-show-settings	Playback-rate menu
data-fideo-show-fullscreen	Fullscreen button

All default to true; set one to "false" to remove that control.

Theming

These six write a custom property straight onto the wrapper. Anything beyond them belongs in CSS or cssVars.

Attribute	Custom property
data-fideo-accent	--fideo-accent
data-fideo-control-bg	--fideo-control-bg
data-fideo-control-color	--fideo-control-color
data-fideo-track	--fideo-track
data-fideo-track-fill	--fideo-track-fill
data-fideo-radius	--fideo-radius

Attributes Fideo writes

Attribute	Meaning
data-fideo-ready	Set to `"true"` on the media element once mounted. Removed on `destroy()`.
data-fideo-lazy-src	Holds a deferred embed URL until the player loads.