☰

Greasy Fork is available in English.

YouTube Volume Display

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);
})();