Installation

An iframe is the entire integration. Give it a responsive container, enable playback permissions, and let the player handle the rest.

1 Place the player

<iframe
  id="velarium-player"
  src="https://velarium.cc/en/watch/movie/1108427?autoPlay=false&amp;theme=A8E6CF&amp;title=true&amp;poster=true&amp;startAt=0"
  title="Video player"
  style="width: 100%; aspect-ratio: 16 / 9; border: 0;"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  allowfullscreen
></iframe>

Using React?

export function Player() {
  return (
    <iframe
      id="velarium-player"
      src="https://velarium.cc/en/watch/movie/1108427?autoPlay=false&theme=A8E6CF&title=true&poster=true&startAt=0"
      title="Video player"
      style={{ width: "100%", aspectRatio: "16 / 9", border: 0 }}
      allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
      allowFullScreen
    />
  );
}

2 Check the browser boundary

• Use HTTPS for both your site and the player in production. Local HTTP is suitable for development.
• Include autoplay, fullscreen, encrypted-media, and picture-in-picture in the iframe permissions.
• Do not add a sandbox attribute. The current player requires an unsandboxed frame for playback and source selection.
• If your site uses Content Security Policy, add the player origin to your frame-src directive.
• Autoplay with sound may require a user gesture. Keep a visible Play control as the fallback.

3 Connect to playback

Use the parent-window handshake to receive progress and playback messages. Check both the origin and the iframe window before accepting data.