<iframe
  id="tella-player"
  src="https://www.tella.tv/video/YOUR_VIDEO_ID/embed"
  allow="autoplay; fullscreen"
></iframe>

<script>
  const iframe = document.getElementById("tella-player");

  // Wait for the player to be ready
  window.addEventListener("message", (event) => {
    if (event.data.type === "ready") {
      console.log("Player is ready!");
      // Now you can send commands
      iframe.contentWindow.postMessage(
        { type: "play" },
        "https://www.tella.tv",
      );
    }
  });
</script>

iframe.contentWindow.postMessage({ type: "play" }, "https://www.tella.tv");

iframe.contentWindow.postMessage({ type: "pause" }, "https://www.tella.tv");

// Seek to 30 seconds
iframe.contentWindow.postMessage(
  { type: "seek", time: 30 },
  "https://www.tella.tv",
);

iframe.contentWindow.postMessage({ type: "mute" }, "https://www.tella.tv");

iframe.contentWindow.postMessage({ type: "unmute" }, "https://www.tella.tv");

// Set volume to 50%
iframe.contentWindow.postMessage(
  { type: "setVolume", volume: 0.5 },
  "https://www.tella.tv",
);

window.addEventListener("message", (event) => {
  // Verify the message is from Tella
  if (event.origin !== "https://www.tella.tv") return;

  const { type, ...data } = event.data;
  console.log("Event:", type, data);
});

{
  "type": "ready"
}

{
  "type": "pointerDown"
}

{
  "type": "playbackState",
  "state": "playing",
  "currentTime": 15.5,
  "duration": 120.0
}

{
  "type": "timeUpdate",
  "currentTime": 16.25,
  "duration": 120.0
}

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Tella Player</title>
  </head>
  <body>
    <iframe
      id="player"
      src="https://www.tella.tv/video/YOUR_VIDEO_ID/embed"
      width="640"
      height="360"
      allow="autoplay; fullscreen"
    ></iframe>

    <div id="controls" style="display: none;">
      <button id="playBtn">Play</button>
      <button id="pauseBtn">Pause</button>
      <input type="range" id="progress" min="0" max="100" value="0" />
      <span id="time">0:00 / 0:00</span>
    </div>

    <script>
      const iframe = document.getElementById("player");
      const controls = document.getElementById("controls");
      const progress = document.getElementById("progress");
      const timeDisplay = document.getElementById("time");

      let duration = 0;
      const origin = "https://www.tella.tv";

      function formatTime(seconds) {
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins}:${secs.toString().padStart(2, "0")}`;
      }

      function send(message) {
        iframe.contentWindow.postMessage(message, origin);
      }

      // Listen for events from the player
      window.addEventListener("message", (event) => {
        if (event.origin !== origin) return;

        switch (event.data.type) {
          case "ready":
            controls.style.display = "block";
            break;

          case "playbackState":
          case "timeUpdate":
            duration = event.data.duration;
            const current = event.data.currentTime;
            progress.value = (current / duration) * 100;
            timeDisplay.textContent = `${formatTime(current)} / ${formatTime(
              duration,
            )}`;
            break;
        }
      });

      // Wire up controls
      document.getElementById("playBtn").onclick = () => send({ type: "play" });
      document.getElementById("pauseBtn").onclick = () =>
        send({ type: "pause" });

      progress.addEventListener("change", () => {
        const time = (progress.value / 100) * duration;
        send({ type: "seek", time });
      });
    </script>
  </body>
</html>

// Recommended: specify the exact origin
iframe.contentWindow.postMessage({ type: "play" }, "https://www.tella.tv");

// Also works but less secure
iframe.contentWindow.postMessage({ type: "play" }, "*");

<!-- Auto-play muted, starting at 30 seconds -->
<iframe
  src="https://www.tella.tv/video/ID/embed?autoPlay=true&muted=1&t=30"
></iframe>