Pause Video when Off-Screen

Automatically manage video playback based on viewport scroll position to preserve bandwidth, maintain accurate analytics, and enforce strict viewability compliance.

Sample Embed Code

Replace your {asset_id} with your asset ID.

<div style="position:relative;aspect-ratio:16/9;">
      <iframe
      id="gumlet-player"
      loading="lazy" title="Gumlet video player"
       src="https://play.gumlet.io/embed/{asset_id}?pause_when_hidden=true"
            style="border:none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
          referrerpolicy="origin"
          allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;clipboard-write;">
          </iframe>
    </div>


<script src="https://cdn.jsdelivr.net/npm/@gumlet/[email protected]/dist/main.global.js"></script>
<script>
  const iframe = document.getElementById('gumlet-player')
  const player = new playerjs.Player(iframe)

  let wasPlaying = false
  let pausedByScroll = false

  player.on('ready', () => {
    player.on('play', () => {
      wasPlaying = true
      pausedByScroll = false
    })
    player.on('pause', () => {
      // Ignore pauses we issued for scroll-offscreen so we can resume later
      if (!pausedByScroll) wasPlaying = false
    })

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (!entry) return

        if (entry.intersectionRatio === 0) {
          player.getPaused((paused) => {
            if (!paused) {
              pausedByScroll = true
              wasPlaying = true
              player.pause()
            }
          })
        } else if (wasPlaying) {
          pausedByScroll = false
          player.play()
        }
      },
      { threshold: 0 }
    )

    observer.observe(iframe)
  })
</script>