Autoplay when visible

Hero videos and ambient backgrounds work better when they only autoplay once the viewer can actually see them — both for performance and for respecting the data plans of mobile viewers.

Pattern

Mount the embed with autoplay=0&muted=1, then start playback from an IntersectionObserver once the iframe enters the viewport. Pause when it leaves.

<div id="hero" style="position: relative; aspect-ratio: 16 / 9; width: 100%">
  <iframe
    src="https://watch.moviie.ai/embed/VIDEO_ID?muted=1&controls=0"
    title="Moviie Player"
    allow="autoplay; fullscreen; picture-in-picture"
    allowfullscreen
    style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0"
  ></iframe>
</div>

<script>
  const target = document.getElementById("hero")
  const iframe = target.querySelector("iframe")

  const observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        const moviie = iframe.contentWindow?.Moviie
        if (!moviie) return
        if (entry.isIntersecting) moviie.play()
        else moviie.pause()
      }
    },
    { threshold: 0.5 },
  )

  observer.observe(target)
</script>

Key points

• Always mute the embed — autoplay with sound is blocked by every modern browser.
• Wait for the iframe to be loaded before reaching for Moviie. The contentWindow.Moviie reference may be undefined for a few hundred milliseconds while the embed boots.
• Set the observer threshold based on UX: 0.5 requires the iframe to be at least 50% in the viewport before playback starts.
• When the page becomes hidden (document.visibilityState === "hidden"), consider pausing as well to save battery.