Only Play Video if Visible
// ==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();
})();