YouTube Volume Display

Display current YouTube volume level in the UI
As of 2024-11-12. See the latest version.
Ask a question, post a review, or report the script.
Wrap lines
// ==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);
})();