Display current YouTube volume level in the UI
// ==UserScript==
// @name YouTube Volume Display
// @namespace https://github.com/Nick2bad4u/UserStyles
// @version 1.2
// @description Display current YouTube volume level in the UI
// @match *://www.youtube.com/*
// @grant none
// @author Nick2bad4u
// @grant none
// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @license UnLicense
// @tag youtube
// ==/UserScript==
(function () {
'use strict';
const playerReady = setInterval(() => {
const videoPlayer =
document.querySelector('video');
const leftControls = document.querySelector(
'.ytp-left-controls',
);
if (videoPlayer && leftControls) {
clearInterval(playerReady);
// Create an input element to display volume level
const volumeDisplay =
document.createElement('input');
volumeDisplay.type = 'text';
volumeDisplay.value = videoPlayer.muted
? '0'
: Math.round(videoPlayer.volume * 100);
volumeDisplay.readOnly = true;
// Style the display element
Object.assign(volumeDisplay.style, {
width: '40px',
marginLeft: '10px',
backgroundColor:
'rgba(255, 255, 255, 0.0)',
color: 'white',
border:
'0px solid rgba(255, 255, 255, 0.0)',
borderRadius: '4px',
zIndex: 9999,
height: '24px',
fontSize: '16px',
padding: '0 4px',
position: 'relative',
top: '13px',
});
// Update display when volume changes
videoPlayer.addEventListener(
'volumechange',
() => {
volumeDisplay.value = videoPlayer.muted
? '0'
: Math.round(
videoPlayer.volume * 100,
);
},
);
// Insert the display element into the left controls
leftControls.appendChild(volumeDisplay);
}
}, 500);
})();