I’m using a standard WordPress theme and I need a way for the video to pause when its not in view, then continue where it left off when its back in view.
Not to sure if this is possible but I’m fairly new to WordPress so not sure the capabilities or how to go about adding custom code etc.
Thanks in advance!
]]>The following JavaScript may prove to be useful:
const videoDiv = document.querySelector("div#wp-custom-header");
const video = document.querySelector("video#wp-custom-header-video");
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
video.pause();
} else {
video.play();
}
});
},
);
observer.observe(videoDiv);
]]>