Vidy — Embed player

Reference

Embed Vidy on your site

Routes, iframe snippet, query flags, autoplay rules, and postMessage events. Copy from here when you leave the playground.

Routes

Movies use a TMDB id. Series add season and episode. Anime uses an AniList id plus episode. Missing season or episode values default to 1.

/movie/{tmdbId}
/tv/{tmdbId}/{season}/{episode}
/anime/{anilistId}/{episode}

Minimal iframe

Give the iframe a real box. Width 100% and a 16:9 height (or aspect-video) is enough. Copy the allow attribute exactly as written; the * after autoplay and fullscreen matters (see Autoplay below).

<iframe
  src="https://vidy.st/movie/315162?color=DC2626"
  width="100%"
  height="100%"
  frameborder="0"
  allowfullscreen
  allow="encrypted-media; autoplay *; fullscreen *"
></iframe>

Autoplay

Off by default. Add autoplay=true and the player starts with sound as soon as a stream is found. It never falls back to muted playback: if the browser refuses, the poster and a play button stay on screen and the first click starts playback with sound. Browsers allow it only when the visitor has already clicked somewhere on the page that embeds the player, and the iframe delegates the permission through allow.

How the allow attribute is evaluated

Each feature in allow is followed by an allowlist of origins. If you write no origin, the browser uses 'src', which means "the origin of the URL in the src attribute". The check is made against the origin of the document that is actually loaded in the frame.

You write	Browser reads it as	Result
allow="autoplay"	autoplay 'src'	Works only if the document loaded in the iframe has the same origin as the URL you put in `src`. If that URL redirects to another domain, the origins no longer match and autoplay is blocked, even after the visitor clicked on the page that embeds the player.
allow="autoplay *"	any origin	Works regardless of redirects or which player domain serves the page. Recommended.
allow="autoplay https://www.vidy.st"	that origin only	Works, as long as the listed origin is the one that is finally loaded (scheme and host must match exactly, `www` included).

The same rule applies to fullscreen, hence fullscreen * in the snippet. To check your setup, run document.featurePolicy.allowsFeature("autoplay") in the DevTools console with the Vidy frame selected as context; it must print true.

Query options

Flags are opt-in. If a key is missing, that feature stays off — except color, which falls back to red.

Param	Where	Example	What it does
color	All	DC2626	Player accent as a 6-digit hex, without #. Buttons and focus rings pick this up.
progress	All	120	Start playback at this many seconds. Useful when you already store watch position on your side.
autoplay	All	true	Off by default. Set to true to start playback with sound as soon as a stream is found, when the browser allows it (see Autoplay below). If blocked, the player waits for a click on the play button.
nextEpisode	TV, anime	true	Adds a Next Episode control in the top bar when another episode exists.
episodeSelector	TV, anime	true	Adds an Episodes control on the bottom bar that opens a fullscreen season/episode picker.
autoplayNextEpisode	TV, anime	true	When the current episode ends, the player continues to the next one automatically.

Worked examples

/movie/315162?color=22C55E&progress=90
/movie/315162?autoplay=true
/tv/1396/1/1?nextEpisode=true&episodeSelector=true&autoplayNextEpisode=true
/anime/21/1?color=FFFFFF&episodeSelector=true

Talking to the parent page

The player posts JSON strings to window.parent. Listen on your page, parse the payload, and ignore anything that is not from your embed.

Type	When	Shape
PLAYER_EVENT	During playback	{ event: "timeupdate" \| "play" \| "pause" \| "ended", currentTime, duration, ... }
MEDIA_DATA	About once a second	{ type: "MEDIA_DATA", data: "<serialized local history>" }

window.addEventListener("message", (event) => {
  if (typeof event.data !== "string") return;
  try {
    const payload = JSON.parse(event.data);
    if (payload.event === "timeupdate") {
      // persist payload.currentTime
    }
  } catch {}
});

What Vidy does not do

There is no catalog, account wall, or watchlist in this app. Those live on the site that embeds the player. Keep titles, artwork, and continue-watching on your side; send progress when the user comes back.

A video player you drop into any page

Pick a route

Drop the iframe

Tune with query flags

Player playground