ProblemsIntersectionObserver for Media Playback
01Medium

IntersectionObserver for Media Playback

JavaScript / Browser APIs

JavaScriptIntersectionObserverVideoPerformance

Context

The MDX video comparison component used IntersectionObserver to play videos when they enter the viewport and pause them when they leave. The threshold and rootMargin options were tuned to avoid premature triggers.

The Concept

IntersectionObserver fires a callback when elements cross a visibility threshold. Combined with `video.play()`/`pause()`, it creates scroll-aware media without polling.

Task

Complete `setupVideoObserver` so the video plays when 50% of it is visible, pauses when it leaves, and handles the browser blocking autoplay.

script.js
Hints0/3 revealed