Chrome
Embed API

Quickstart

Embed the player directly into your site using an iframe. Point src to a Chrome embed URL and you're done.

<iframe
  src="https://chromiumsrc.pages.dev/embed?movie={tmdb_id}"
  width="100%" height="100%"
  frameborder="0" allowfullscreen
  allow="autoplay; fullscreen; picture-in-picture"
></iframe>

<iframe
  src="https://chromiumsrc.pages.dev/embed?tv={tmdb_id}&s={season}&e={episode}"
  width="100%" height="100%"
  frameborder="0" allowfullscreen
  allow="autoplay; fullscreen; picture-in-picture"
></iframe>

URL Structure

All content is identified by TMDB IDs. Find any ID on themoviedb.org — it's in the URL when you view a title.

URL Customization

Customize player behavior with URL parameters:

<iframe src="https://chromiumsrc.pages.dev/embed?tv=31132&s=1&e=1&seek=15&autoplay=true&color=ff5722&autoskip=true"></iframe>

Player Events (chrome:)

Listen for events via postMessage to sync your application with the player. All events are prefixed with chrome:.

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://chromiumsrc.pages.dev') return;
  
  const { type, ...data } = event.data;
  
  switch (type) {
    case 'chrome:ready':
      console.log('Player ready');
      break;
    case 'chrome:timeupdate':
      console.log(data.currentTime, '/', data.duration);
      break;
  }
});

Player Methods

Control the player programmatically by sending commands via postMessage. Commands are sent with type chrome:command.

const iframe = document.querySelector('iframe');

function sendCommand(command, args = []) {
  iframe.contentWindow.postMessage({
    type: 'chrome:command',
    command,
    args
  }, 'https://chromiumsrc.pages.dev');
}

// Examples
sendCommand('play');
sendCommand('pause');
sendCommand('seek', [120]);
sendCommand('setVolume', [0.5]);

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://chromiumsrc.pages.dev') return;
  if (event.data.type !== 'chrome:response') return;

  switch (event.data.command) {
    case 'getCurrentTime':
      console.log('Current time:', event.data.result);
      break;
  }
});

Content Parameters

Advanced Usage

For fully responsive embeds, wrap the iframe in a container with a fixed aspect ratio.

<div style="aspect-ratio: 16 / 9; width: 100%;">
  <iframe
    src="https://chromiumsrc.pages.dev/embed?movie=550"
    style="width: 100%; height: 100%; border: none;"
    allowfullscreen
    allow="autoplay; fullscreen; picture-in-picture"
  ></iframe>
</div>

• Always verify message origin before processing postMessage events
• Set iframe to 100% width/height and control size with parent container
• Include allow="autoplay; fullscreen; picture-in-picture" on your iframe
• Lazy-load iframe when it enters viewport for better performance
• Listen for chrome:error events and provide fallback UI

Player Features

Important Notes

• All content is served via third-party public sources — Chrome acts as a metadata and discovery layer only.
• TMDB IDs can be found on themoviedb.org — search any title and check the URL.
• Season and episode numbers always use official numbering, starting from 1.
• The embed is fully client-side — no server dependency for the end viewer.
• Chrome does not store user data or require API keys.
• Always verify event.origin in production for security.