Developer Docs

Documentation

Vidsuper turns any title into a play-anywhere player. Paste one <iframe>into your page — no SDK, no build step, no keys — and you're streaming in minutes. Everything past this point is just an iframe src and a handful of optional query parameters.

01 · Setup

Getting Started

Two snippets and you're live — one to drop the player in, one to make it scale.

Drop in the player

Paste this wherever you want the player to appear, then give it a size:

Minimal embed

<iframe
  src="https://test.vidsuper.net/movie/299534"
  width="100%"
  height="100%"
  frameborder="0"
  allowfullscreen
  allow="encrypted-media"
></iframe>

Make it fluid

For a player that scales cleanly to any width, wrap it in a 16:9 box:

Responsive 16:9 wrapper

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="https://test.vidsuper.net/movie/299534"
    style="position: absolute; inset: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

02 · Routing

Player URLs

Every player is just a URL. Point the iframe src at a movie or a specific episode.

Movies

https://test.vidsuper.net/movie/{tmdb_id}

Movie — Avengers: Endgame

<iframe src="https://test.vidsuper.net/movie/299534"></iframe>

TV episodes

https://test.vidsuper.net/tv/{tmdb_id}/{season}/{episode}

TV — Game of Thrones S1·E1

<iframe src="https://test.vidsuper.net/tv/1399/1/1"></iframe>

03 · Configuration

Parameters

Append query parameters to the src to recolor the player or switch features on. Stack as many as you need.

Accent color

Pass color as a hex code (drop the #) to theme the controls, progress bar and highlights:

<!-- Purple -->
<iframe src="https://test.vidsuper.net/movie/299534?color=8B5CF6"></iframe>

<!-- Blue -->
<iframe src="https://test.vidsuper.net/movie/299534?color=3B82F6"></iframe>

Feature flags

Each of these is opt-in — add it to the query string to turn it on:

Parameter	What it does
`color`	Accent color as a hex code without the # (e.g. color=8B5CF6).
`progress`	Resume point in seconds — progress=120 starts at 2:00.
`nextEpisode`	Show the next-episode button in the control bar.
`episodeSelector`	Turn on the built-in season / episode picker.
`autoplayNextEpisode`	Roll straight into the next episode when one ends.
`overlay`	Show a Netflix-style info overlay while the player is paused.
`skip_intro`	Offer Skip Intro / Skip Recap over those segments.

Everything at once

<iframe src="https://test.vidsuper.net/tv/1399/1/1?nextEpisode=true&autoplayNextEpisode=true&episodeSelector=true&overlay=true&skip_intro=true&color=8B5CF6"></iframe>

04 · Integration

Player Events

The player streams playback events to the parent window via postMessage — listen in and store progress wherever you like.

Track watch progress

window.addEventListener("message", (event) => {
  const data = JSON.parse(event.data);

  // data.id        TMDB id
  // data.type      "play" | "pause" | "timeupdate" | "ended"
  // data.progress  current time (seconds)
  // data.duration  total length (seconds)
  // data.season / data.episode   (TV only)

  // ...persist to localStorage, your API, anywhere.
  console.log("player event:", data);
});

05 · Reference

Content IDs

Vidsuper is keyed on TMDB IDs. Grab them from a title's themoviedb.org URL or the TMDB API.

Where to find them

Movies — themoviedb.org/movie/299534
TV — themoviedb.org/tv/1399

The number after /movie/ or /tv/ is the id you drop into the player URL.