Stellar embed APIPublic · no key
One iframe.
Any TMDB title.
Embed the Stellar player for a movie or a specific TV episode using its TMDB ID. Every embed is ad-free, with no API key or player SDK required.
- routes
- 2
- parameters
- 7
- languages
- 16
- API keys
- 0
Quick start
Live in under a minute
- 1
Find the TMDB ID
Open the title on themoviedb.org and copy the number from its address.
- 2
Pick the route
Movies need only the ID. TV episodes add a season and an episode number.
- 3
Paste the iframe
Drop the snippet into your page. It fills the width of its container at 16:9.
<iframe
src="https://stellar.rip/en/watch/embed/movie/1081003"
title="Stellar player"
width="100%"
style="aspect-ratio: 16 / 9; border: 0;"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>Routes
URL formats
Use the numeric ID from TMDB, not an IMDb ID. Season and episode numbers are required for TV embeds. Replace language with one of the supported locale codes below.
Movie
A single film, identified by its TMDB movie ID.
https://stellar.rip/{language}/watch/embed/movie/{tmdb_id}- {language}locale
- One of the supported player language codes, such as en, fr, or fil.
- {tmdb_id}integer
- The numeric TMDB movie ID.
TV episode
One episode of a show. The player can continue to the next episode.
https://stellar.rip/{language}/watch/embed/tv/{tmdb_id}-{season}-{episode}- {language}locale
- One of the supported player language codes, such as en, fr, or fil.
- {tmdb_id}integer
- The numeric TMDB show ID.
- {season}integer
- Season number. Season 0 holds specials.
- {episode}integer
- Episode number within the season, starting at 1.
Always include the language
Malformed paths return 404
Configure and preview
Make the player fit your site
Live movie preview
Responsive desktop 16:9 viewport
<iframe
id="stellar-player"
src="https://stellar.rip/en/watch/embed/movie/1081003?theme=9B8CFF&title=true&poster=true&autoPlay=false&startAt=0"
title="Stellar 4K movie player demo"
width="100%"
style="aspect-ratio: 16 / 9; border: 0;"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>Reference
Query parameters
Add any combination after ? and join additional values with &. Invalid values are ignored and use the normal player defaults.
titlebooleanShow or hide the media title.
- Value
true | false- Default
true
posterbooleanShow or hide player artwork.
- Value
true | false- Default
true
autoPlaybooleanStart when ready, or show the zero-progress artwork and Play screen when false.
- Value
true | false- Default
- Player default
startAtnumberBegin at a non-negative timestamp. An explicit value always wins over saved progress.
- Value
seconds- Default
- Saved progress
themehexSet the player accent color. Six hex digits, no # symbol.
- Value
RRGGBB- Default
- Stellar violet
nextButtonbooleanShow Up Next after 90% watched.
- Value
true | false- Default
- Follows auto-next
autoNextbooleanLoad the next episode at the end; enable autoplay too. autoNext=true with autoPlay=false is ignored.
- Value
true | false- Default
- Viewer preference
An explicit start wins
startAt value, including 0, overrides saved progress.Auto-next needs autoplay
autoNext=true is ignored while autoPlay=false, so contradictory URLs stay safe.Older embeds keep working
title or an image URL to poster are still honored. Use true or false in new code.Localization
Supported player languages
Change the locale immediately after the hostname. For example, use /fr/watch/embed/... for French or /fil/watch/embed/... for Filipino. The selected locale translates player controls and available localized metadata. It does not force an audio or subtitle language; available tracks depend on the stream and can be selected in the player.
Pick a language to load it in the playground above.
postMessage
Playback events
- 01PlayerYour page
STELLAR_EMBED_READYAnnounces that the player has loaded. It carries no viewer data.
- 02Your pagePlayer
STELLAR_EMBED_INITYour reply. It binds every later message to your page's origin.
- 03PlayerYour page
PLAYER_EVENTIncludes time, duration, TMDB ID, media type, and TV season/episode.
playpauseseekedendedtimeupdate - 04PlayerYour page
MEDIA_DATAProvides a progress snapshot keyed by TMDB ID while the title plays.
const playerOrigin = "https://stellar.rip";
const getPlayerFrame = () => document.getElementById("stellar-player");
const initializePlayerMessages = () => {
const playerFrame = getPlayerFrame();
playerFrame?.contentWindow?.postMessage(
{ type: "STELLAR_EMBED_INIT" },
playerOrigin
);
};
window.addEventListener("message", (event) => {
if (event.origin !== playerOrigin) return;
const playerFrame = getPlayerFrame();
if (event.source !== playerFrame?.contentWindow) return;
if (event.data?.type === "STELLAR_EMBED_READY") {
initializePlayerMessages();
return;
}
if (event.data?.type === "PLAYER_EVENT") {
const { event: name, currentTime, duration } = event.data.data;
console.log(name, currentTime, duration);
}
if (event.data?.type === "MEDIA_DATA") {
console.log("Playback progress", event.data.data);
}
});
const connectPlayerFrame = () => {
const playerFrame = getPlayerFrame();
playerFrame?.addEventListener("load", initializePlayerMessages);
if (playerFrame) initializePlayerMessages();
};
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", connectPlayerFrame, {
once: true,
});
} else {
connectPlayerFrame();
}Player data only goes to your origin
event.origin and event.source in your listener.Layout
Responsive embeds
<!-- The wrapper owns the size; the player fills it. -->
<div style="position: relative; width: 100%; aspect-ratio: 16 / 9;">
<iframe
src="https://stellar.rip/en/watch/embed/tv/83867-1-1"
title="Stellar player"
style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0;"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>The allow list
autoplay- Lets autoPlay=true and auto-next start playback on their own.
fullscreen- Enables the player's fullscreen control (with allowfullscreen).
picture-in-picture- Permits picture-in-picture playback where the browser offers it.
encrypted-media- Allows protected media playback in browsers that require it.
Built for every screen
Touch devices get touch controls in portrait and landscape. Use the portrait and landscape previews in the playground to check tall and short layouts before you ship.
Try the device previewsRequirement
Send a referrer
Framed player loads must include a Referer header so the player knows which site embeds it. The browser default, strict-origin-when-cross-origin, already works and shares only your origin. Pages that strip the header see a “This embed needs a referrer” notice instead of the player.
<!-- Blocked: the player cannot identify your site -->
<meta name="referrer" content="no-referrer" />
<iframe src="…" referrerpolicy="no-referrer"></iframe><!-- Works: sends only your origin, never the full path -->
<iframe
src="…"
referrerpolicy="strict-origin-when-cross-origin"
></iframe>Good to know
Frequently asked questions
Do I need an API key or an account?
Are embeds ad-free?
Where do I find the TMDB ID?
/movie/1081003 or /tv/83867. IMDb IDs are not supported.Can I choose the audio or subtitle language?
Why doesn't autoplay start?
autoPlay=true and keep autoplay in the iframe's allow list. Browsers can still hold back playback with sound until the visitor has interacted with your page.Can viewers resume where they left off?
startAt and the player resumes from saved progress when it has some. Any explicit startAt, including 0, always takes priority.The frame says “This embed needs a referrer”. What now?
no-referrer from the iframe or your referrer meta tag. See Referrer policy.Ready when you are
Copy the snippet, swap the TMDB ID, and you're live.

