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.

Example:

HTML
<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:

javascript
let video = document.getElementById('Video')

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

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

})

observer.observe(video)

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