Configure

Responsive media

Give Fideo up to three sources and three posters and it picks the right pair for the current viewport, re-evaluating whenever the window resizes or the device rotates.

Resize this page

The player below has a poster for each breakpoint. Narrow your window past 1024px and then past 767px — the poster swaps and the readout follows.

Recomputed on resize—

Viewport—

Band—

Poster in use—

Declaring sources

data-fideo-src is the general source; the suffixed variants override it for their band. A player only needs the widths it actually has assets for.

Three encodes, one elementhtml

<video
  data-fideo
  data-fideo-src-desktop="/media/clip-1080.mp4"
  data-fideo-src-tablet="/media/clip-720.mp4"
  data-fideo-src-mobile="/media/clip-480.mp4"
  data-fideo-poster-desktop="/media/poster-wide.jpg"
  data-fideo-poster-mobile="/media/poster-tall.jpg"
></video>

The JavaScript equivalentjs

mountFideo(el, {
  sources: {
    desktop: '/media/clip-1080.mp4',
    tablet: '/media/clip-720.mp4',
    mobile: '/media/clip-480.mp4',
  },
  posters: {
    desktop: '/media/poster-wide.jpg',
    mobile: '/media/poster-tall.jpg',
  },
});

// A bare string is shorthand for { desktop: … }
mountFideo(el, { sources: '/media/clip.mp4' });

Sources and posters merge, and JavaScript wins per key. This is the opposite of scalar options, where the data attribute wins. Set posters.desktop in JavaScript and it overrides data-fideo-poster-desktop, while posters.mobile from the markup survives.

Which one gets picked

Fideo compares window.innerWidth against the breakpoints and walks a fallback chain, so a missing asset never leaves the player empty.

Viewport width	Band	Preference order
≤ 767	mobile	mobile → tablet → desktop
768 – 1024	tablet	tablet → desktop → mobile
> 1024	desktop	desktop → tablet → mobile

Moving the breakpoints

Per player, either wayhtml

<video data-fideo data-fideo-breakpoint-mobile="600" data-fideo-breakpoint-tablet="900"></video>

Or for every player at oncejs

initFideo({ breakpoints: { mobile: 600, tablet: 900 } });

What happens on resize

Resize and orientation changes are batched into a single requestAnimationFrame, so dragging a window edge does not thrash the player.
The source only changes when the resolved URL actually differs. Crossing a breakpoint with no asset for that band is a no-op.
Swapping a source reloads the media element, which restarts playback from zero. Prefer encodes of the same cut.
The poster overlay updates in place and is only visible while the player is paused.

Posters are an overlay, not the native attribute. Fideo renders its own <img class="fideo__poster"> so posters work identically for iframe providers, which have no poster attribute at all. It is decorative and hidden from assistive tech.

Responsive embeds

Iframe providers accept the same attributes. Fideo loads the matching embed URL through the provider's own API rather than reloading the frame.

A different cut per breakpointhtml

<iframe
  data-fideo
  data-fideo-src-desktop="https://vimeo.com/347119375"
  data-fideo-src-mobile="https://vimeo.com/76979871"
  data-fideo-poster-mobile="/media/poster-tall.jpg"
></iframe>

Provider detection reads the responsive sources too, so an element with no src of its own is still identified correctly from data-fideo-src-desktop.