<video id="vid" src="https://assets.codepen.io/3/lil-video.webm"></video>
body {
padding-top: 2000px;
}
View Compiled
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
// go to some good part of video
vid.currentTime = 1.2;
} else {
if (entry.isIntersecting) {
vid.play();
}
}
});
});
observer.observe(vid);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.