☰

YouTube Volume Control on Hover

Control YouTube volume by scrolling your mouse wheel while hovering over the video player — no need to click!

Verze ze dne 22. 04. 2025. Zobrazit nejnovější verzi.

  1. // ==UserScript==
  2. // @name         YouTube Volume Control on Hover
  3. // @namespace    https://greatest.deepsurf.us/users/1461079
  4. // @version      1.0
  5. // @description  Control YouTube volume by scrolling your mouse wheel while hovering over the video player — no need to click!
  6. // @author       Michaelsoft
  7. // @match        *://www.youtube.com/*
  8. // @grant        none
  9. // @run-at       document-start
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     let video = null;
  17.     let player = null;
  18.  
  19.     // === USER-ADJUSTABLE SETTINGS ===
  20.     const VOLUME_STEP = 5; // Change this value to adjust how much volume changes per scroll (e.g. 1, 5, 10)
  21.  
  22.     function getYouTubePlayerAPI() {
  23.         const ytp = document.querySelector('.html5-video-player');
  24.         return ytp && typeof ytp.getVolume === 'function' && typeof ytp.setVolume === 'function' ? ytp : null;
  25.     }
  26.  
  27.     function showOverlay(volumePercent) {
  28.         let overlay = document.getElementById('volume-overlay');
  29.         if (!overlay) {
  30.             overlay = document.createElement('div');
  31.             overlay.id = 'volume-overlay';
  32.             overlay.style.position = 'fixed';
  33.             overlay.style.top = '10%';
  34.             overlay.style.left = '50%';
  35.             overlay.style.transform = 'translateX(-50%)';
  36.             overlay.style.padding = '10px 20px';
  37.             overlay.style.background = 'rgba(0,0,0,0.7)';
  38.             overlay.style.color = '#fff';
  39.             overlay.style.fontSize = '18px';
  40.             overlay.style.borderRadius = '5px';
  41.             overlay.style.zIndex = '9999';
  42.             document.body.appendChild(overlay);
  43.         }
  44.  
  45.         overlay.innerText = `Volume: ${volumePercent}%`;
  46.         overlay.style.display = 'block';
  47.  
  48.         clearTimeout(window.volTimer);
  49.         window.volTimer = setTimeout(() => {
  50.             overlay.style.display = 'none';
  51.         }, 1000);
  52.     }
  53.  
  54.     function handleScroll(event) {
  55.         event.preventDefault();
  56.         if (!player) return;
  57.  
  58.         let currentVolume = player.getVolume(); // 0-100
  59.         let newVolume = event.deltaY < 0
  60.             ? Math.min(currentVolume + VOLUME_STEP, 100)
  61.             : Math.max(currentVolume - VOLUME_STEP, 0);
  62.  
  63.         player.setVolume(newVolume);
  64.         showOverlay(newVolume);
  65.     }
  66.  
  67.     document.addEventListener('mouseover', function(event) {
  68.         if (event.target.tagName === 'VIDEO') {
  69.             video = event.target;
  70.             player = getYouTubePlayerAPI();
  71.             if (player) {
  72.                 video.addEventListener('wheel', handleScroll, { passive: false });
  73.             }
  74.         }
  75.     });
  76.  
  77.     document.addEventListener('mouseleave', function(event) {
  78.         if (event.target.tagName === 'VIDEO') {
  79.             if (video) {
  80.                 video.removeEventListener('wheel', handleScroll);
  81.             }
  82.             video = null;
  83.             player = null;
  84.         }
  85.     });
  86.  
  87. })();