Pausing Header Media When It Is Off Screen

  • Hi,

    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!

    • This topic was modified 3 years, 4 months ago by woodybruh.
    • This topic was modified 3 years, 4 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not a Requests and Feedback topic
    • This topic was modified 3 years, 4 months ago by James Huff.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi, woodybruh, this is possible with JavaScript and there are different ways on how to add JavaScript to your WordPress site: using plugins or adding the code manually.

    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);
Viewing 1 replies (of 1 total)
  • The topic ‘Pausing Header Media When It Is Off Screen’ is closed to new replies.