Quick start
Embed a Moviie Player on your page in under a minute.
The fastest way to ship Moviie on your website is the embed iframe. You get a fully featured player with adaptive bitrate, captions, fullscreen and Picture-in-Picture out of the box.
1. Copy the embed snippet
Paste the snippet below into any HTML page. Replace VIDEO_ID with the
identifier shown in the Moviie dashboard for your video.
<iframe
src="https://watch.moviie.ai/embed/VIDEO_ID"
title="Moviie Player"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
width="640"
height="360"
style="border: 0"
></iframe>2. Make it responsive
Wrap the iframe in a container with a fixed aspect ratio so it scales with the layout instead of relying on hard-coded pixels.
<div style="position: relative; width: 100%; aspect-ratio: 16 / 9">
<iframe
src="https://watch.moviie.ai/embed/VIDEO_ID"
title="Moviie Player"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0"
></iframe>
</div>3. (Optional) Control the player from your code
The Moviie Player communicates with your page via the browser's native
postMessage API. Send commands to the iframe and listen for events with
a message listener — no SDK required.
const iframe = document.querySelector("iframe")
// React to player events
window.addEventListener("message", (event) => {
if (!event.data || typeof event.data !== "object") return
if (event.data.type === "moviie:ready") {
console.log("Player is ready")
}
if (event.data.type === "moviie:event") {
console.log("Player event:", event.data.event)
}
})
// Send a command
iframe.contentWindow.postMessage(
{ type: "moviie:command", method: "play", args: [] },
"*"
)Read the full Player API guide to learn about all events, commands and the state shape.