YouTube Volume Control on Hover

Control YouTube volume by scrolling your mouse wheel while hovering over the video player — no need to click!
Versión del día 23/4/2025. Echa un vistazo a la versión más reciente.
Pregunta tus dudas, ponle nota o notifica una posible infracción de las normas.
Ajuste de línea
// ==UserScript==
// @name         YouTube Volume Control on Hover
// @namespace    https://greasyfork.org/users/1461079
// @version      1.0
// @description  Control YouTube volume by scrolling your mouse wheel while hovering over the video player — no need to click!
// @author       Michaelsoft
// @match        *://www.youtube.com/*
// @grant        none
// @run-at       document-start
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    let video = null;
    let player = null;

    // === USER-ADJUSTABLE SETTINGS ===
    const VOLUME_STEP = 5; // Change this value to adjust how much volume changes per scroll (e.g. 1, 5, 10)

    function getYouTubePlayerAPI() {
        const ytp = document.querySelector('.html5-video-player');
        return ytp && typeof ytp.getVolume === 'function' && typeof ytp.setVolume === 'function' ? ytp : null;
    }

    function showOverlay(volumePercent) {
        let overlay = document.getElementById('volume-overlay');
        if (!overlay) {
            overlay = document.createElement('div');
            overlay.id = 'volume-overlay';
            overlay.style.position = 'fixed';
            overlay.style.top = '10%';
            overlay.style.left = '50%';
            overlay.style.transform = 'translateX(-50%)';
            overlay.style.padding = '10px 20px';
            overlay.style.background = 'rgba(0,0,0,0.7)';
            overlay.style.color = '#fff';
            overlay.style.fontSize = '18px';
            overlay.style.borderRadius = '5px';
            overlay.style.zIndex = '9999';
            document.body.appendChild(overlay);
        }

        overlay.innerText = `Volume: ${volumePercent}%`;
        overlay.style.display = 'block';

        clearTimeout(window.volTimer);
        window.volTimer = setTimeout(() => {
            overlay.style.display = 'none';
        }, 1000);
    }

    function handleScroll(event) {
        event.preventDefault();
        if (!player) return;

        let currentVolume = player.getVolume(); // 0-100
        let newVolume = event.deltaY < 0
            ? Math.min(currentVolume + VOLUME_STEP, 100)
            : Math.max(currentVolume - VOLUME_STEP, 0);

        player.setVolume(newVolume);
        showOverlay(newVolume);
    }

    document.addEventListener('mouseover', function(event) {
        if (event.target.tagName === 'VIDEO') {
            video = event.target;
            player = getYouTubePlayerAPI();
            if (player) {
                video.addEventListener('wheel', handleScroll, { passive: false });
            }
        }
    });

    document.addEventListener('mouseleave', function(event) {
        if (event.target.tagName === 'VIDEO') {
            if (video) {
                video.removeEventListener('wheel', handleScroll);
            }
            video = null;
            player = null;
        }
    });

})();