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:
javascriptlet 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.