Reddit Video Auto Pauser ▶️

Only Play Video if Visible

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         Reddit Video Auto Pauser ▶️
// @description  Only Play Video if Visible
// @match        https://*.reddit.com/*
// @grant        none
// @icon         https://www.redditstatic.com/desktop2x/img/favicon/android-icon-192x192.png
// @namespace    old.reddit.com
// @version      1.1
// @license      MIT
// ==/UserScript==

(function() {
  'use strict';

  // Helper function to check if an element is at least 90% visible
  function isElementVisible(element) {
    const rect = element.getBoundingClientRect();
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
    const vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
    const horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
    const visiblePercentage = (Math.min(rect.bottom, windowHeight) - Math.max(rect.top, 0)) / rect.height * 100;
    return vertInView && horInView && visiblePercentage >= 90; // <--Percentage!
  }

  // Function to stop all videos on the page
  function stopAllVideos() {
    const videos = document.getElementsByTagName('video');
    for (let i = 0; i < videos.length; i++) {
      videos[i].pause();
    }
  }

  // Function to check video visibility and play/pause accordingly
  function checkVideoVisibility() {
    const videos = document.getElementsByTagName('video');
    for (let i = 0; i < videos.length; i++) {
      const video = videos[i];
      if (isElementVisible(video)) {
        video.play();
      } else {
        video.pause();
      }
    }
  }

  // Event listener to check video visibility when the page is scrolled or resized
  window.addEventListener('load', checkVideoVisibility);
  window.addEventListener('scroll', checkVideoVisibility);
  window.addEventListener('resize', checkVideoVisibility);

  // Initial check when the script is executed
  checkVideoVisibility();

})();