Control YouTube volume by scrolling your mouse wheel while hovering over the video player — no need to click!
ของเมื่อวันที่
// ==UserScript==
// @name YouTube Volume Control on Hover
// @namespace https://greatest.deepsurf.us/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;
}
});
})();