Test the player
Pick a player type, copy the link and put it in an iframe. The player only loads when you press play, so visiting this page never starts a download.
Built to drop in
Everything is controlled from the link, no account or SDK needed.
- Easy to use
Copy the link and embed it into your website.
- Finds a working source
Searches several sources at once and quietly switches if one is slow or stops.
- Customizable
Colours, title, poster, autoplay and more, using only query parameters.
- Subtitles
Built-in subtitles in the CC menu, plus your own VTT file.
- Watch progress
Resume where the viewer stopped and build a Continue watching row on your site.
- Player events
Play, pause, seek, ended and time updates are sent to your page.
API documentation
Use TMDB IDs (1396) or IMDb IDs (tt0903747).
Embed movies
The TMDB or IMDb ID is required.
__ORIGIN__/embed/movie/{tmdbId}
<iframe src="__ORIGIN__/embed/movie/786892" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen ></iframe>
Embed shows
The ID, season and episode number are required.
__ORIGIN__/embed/tv/{tmdbId}/{season}/{episode}
<iframe src="__ORIGIN__/embed/tv/94997/1/1" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture; encrypted-media" allowfullscreen ></iframe>
Embed anime
Anime works like any TV show. Add ?audio=dub to prefer English-dubbed sources.
__ORIGIN__/embed/tv/{tmdbId}/{season}/{episode}
__ORIGIN__/embed/tv/1429/1/1?audio=dub
Customization parameters
Append parameters to the embed URL. Start with ? and separate more with &. Colours are hex codes without the #.
Customize the player
Change the options and the link updates. Press Load in player to see it.
Watch progress
Track your viewers' progress across movies and shows to build a Continue watching feature on your website. The player sends a MEDIA_DATA message to your page while it plays.
1. Add an event listener
Add this script where your iframe is. In React or Next.js, put it in a useEffect hook.
window.addEventListener('message', (event) => {
if (event.origin !== '__ORIGIN__') return;
if (event.data?.type === 'MEDIA_DATA') {
const mediaData = event.data.data;
localStorage.setItem('playerProgress', JSON.stringify(mediaData));
}
});
2. Stored data structure
The data holds the title details, the watch progress, the last watched episode and each episode's progress for shows.
{
"76479": {
"id": 76479,
"type": "tv",
"title": "The Boys",
"poster_path": "/2zmTngn1tYC1AvfnrFLhxeD82hz.jpg",
"backdrop_path": "/example.jpg",
"progress": { "watched": 31.4, "duration": 3609.8 },
"last_season_watched": "1",
"last_episode_watched": "1",
"show_progress": {
"s1e1": {
"season": "1",
"episode": "1",
"progress": { "watched": 31.4, "duration": 3609.8 }
}
},
"last_updated": 1725723972695
},
"786892": {
"id": 786892,
"type": "movie",
"title": "Furiosa: A Mad Max Saga",
"poster_path": "/iADOJ8Zymht2JPMoy3R7xceZprc.jpg",
"progress": { "watched": 8726.9, "duration": 8891.7 },
"last_updated": 1725723972695
}
}
Player events
Listen to player events to track playback. Events are sent to the parent window with postMessage.
Available events
play when the video starts playing, pause when it is paused, seeked when the viewer jumps to another time, ended when playback finishes and timeupdate every few seconds while playing.
{
type: "PLAYER_EVENT",
data: {
event: "play" | "pause" | "seeked" | "ended" | "timeupdate",
currentTime: number,
duration: number,
mtmdbId: number,
mediaType: "movie" | "tv",
season?: number,
episode?: number
}
}
Implementation example
window.addEventListener('message', (event) => {
if (event.origin !== '__ORIGIN__') return;
if (event.data?.type === 'PLAYER_EVENT') {
const { event: eventType, currentTime, duration } = event.data.data;
console.log(`Player ${eventType} at ${currentTime}s of ${duration}s`);
}
});