A simple example on how to use the Intersection Observer API

The IntersectionObserver executes a callback function when a certain element intersects with the viewport—or a custom element.


<video id = 'Video' src ='movie.mp4' muted></video>

We configure the video to autoplay when it's visible on the page elem.isIntersecting === true. Otherwise, we'll pause it:

let video = document.getElementById('Video')

let observer = new IntersectionObserver(([elem]) => {

    elem.isIntersecting ? video.play() : video.pause()



Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.