☰

🔊 YouTube Volume Control on Scroll

Control YouTube volume with your mouse wheel - just hover over the video and scroll. Simple, fast, and click-free!

  1. // ==UserScript==
  2. // @name         🔊 YouTube Volume Control on Scroll
  3. // @namespace    https://greasyfork.org/users/1461079
  4. // @version      1.3.1
  5. // @description  Control YouTube volume with your mouse wheel - just hover over the video and scroll. Simple, fast, and click-free!
  6. // @author       Michaelsoft
  7. // @match        *://www.youtube.com/*
  8. // @grant        none
  9. // @run-at       document-end
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.  
  16.       // === USER-ADJUSTABLE SETTINGS ===
  17.     const VOLUME_STEP = 10; // Change this value to adjust how much volume changes per scroll (e.g. 1, 5, 10)
  18.       // === /USER-ADJUSTABLE SETTINGS ===
  19.  
  20.     let video = null;
  21.     let player = null;
  22.  
  23.     function isWatchPage() {
  24.         return location.pathname === '/watch' && location.search.includes('v=');
  25.     }
  26.  
  27.     function getYouTubePlayerAPI() {
  28.         const ytp = document.querySelector('.html5-video-player');
  29.         return ytp && typeof ytp.getVolume === 'function' && typeof ytp.setVolume === 'function' ? ytp : null;
  30.     }
  31.  
  32.     function showOverlay(volumePercent) {
  33.         let overlay = document.getElementById('volume-overlay');
  34.         if (!overlay) {
  35.             overlay = document.createElement('div');
  36.             overlay.id = 'volume-overlay';
  37.             overlay.style.position = 'fixed';
  38.             overlay.style.top = '10%';
  39.             overlay.style.left = '50%';
  40.             overlay.style.transform = 'translateX(-50%)';
  41.             overlay.style.padding = '10px 20px';
  42.             overlay.style.background = 'rgba(0,0,0,0.7)';
  43.             overlay.style.color = '#fff';
  44.             overlay.style.fontSize = '18px';
  45.             overlay.style.borderRadius = '5px';
  46.             overlay.style.zIndex = '9999';
  47.             document.body.appendChild(overlay);
  48.         }
  49.  
  50.         overlay.innerText = `Volume: ${volumePercent}%`;
  51.         overlay.style.display = 'block';
  52.  
  53.         clearTimeout(window.volTimer);
  54.         window.volTimer = setTimeout(() => {
  55.             overlay.style.display = 'none';
  56.         }, 1000);
  57.     }
  58.  
  59.     function handleScroll(event) {
  60.         if (!isWatchPage()) return;
  61.  
  62.         event.preventDefault();
  63.         if (!player) return;
  64.  
  65.         const currentVolume = player.getVolume();
  66.         const newVolume = event.deltaY < 0
  67.             ? Math.min(currentVolume + VOLUME_STEP, 100)
  68.             : Math.max(currentVolume - VOLUME_STEP, 0);
  69.  
  70.         player.setVolume(newVolume);
  71.         showOverlay(newVolume);
  72.     }
  73.  
  74.     function setupVolumeControl() {
  75.         if (!isWatchPage()) return;
  76.  
  77.         const maybeVideo = document.querySelector('video');
  78.         const maybePlayer = getYouTubePlayerAPI();
  79.  
  80.         if (maybeVideo && maybeVideo !== video && maybePlayer) {
  81.             if (video) video.removeEventListener('wheel', handleScroll);
  82.             video = maybeVideo;
  83.             player = maybePlayer;
  84.             video.addEventListener('wheel', handleScroll, { passive: false });
  85.         }
  86.     }
  87.  
  88.     // Watch for SPA route changes and DOM mutations
  89.     const observer = new MutationObserver(() => {
  90.         if (isWatchPage()) {
  91.             setupVolumeControl();
  92.         } else {
  93.             if (video) {
  94.                 video.removeEventListener('wheel', handleScroll);
  95.                 video = null;
  96.                 player = null;
  97.             }
  98.         }
  99.     });
  100.  
  101.     observer.observe(document.body, { childList: true, subtree: true });
  102.  
  103.     // Run once on load too
  104.     window.addEventListener('yt-navigate-finish', () => setTimeout(setupVolumeControl, 300));
  105.     window.addEventListener('DOMContentLoaded', () => setTimeout(setupVolumeControl, 300));
  106. })();