☰

YouTube Middle Mouse Button Mute / Unmute Combined

Mutes / unmutes a YouTube video / Shorts by clicking the middle mouse button within the video player. For Shorts you can also middle mouse click the black side bars around the video. While performing the middle mouse button click, the scroll button gets disabled. Mute / unmute / scroll disabling won't work with any elements floating over the video player.

As of 2024-07-30. See the latest version.

// ==UserScript==
// @name         YouTube Middle Mouse Button Mute / Unmute Combined
// @description  Mutes / unmutes a YouTube video / Shorts by clicking the middle mouse button within the video player. For Shorts you can also middle mouse click the black side bars around the video. While performing the middle mouse button click, the scroll button gets disabled. Mute / unmute / scroll disabling won't work with any elements floating over the video player.
// @namespace    https://greasyfork.org/users/877912
// @version      0.3
// @license      MIT
// @match        *://*.youtube.com/watch*?*v=*
// @match        *://*.youtube.com/embed/*?*v=*
// @match        *://*.youtube.com/v/*
// @match        *://*.youtube.com/shorts/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function() {
    const selectors = {
        videoAreaRegularAndShorts: "video.video-stream.html5-main-video",
        videoAreaRegularBlackBars1: "div.ytp-player-content.ytp-iv-player-content[data-layer='4']",
        videoAreaRegularBlackBars2: "div#movie_player",
        videoAreaShortsBlackBars: "div#shorts-container",
        muteButtonRegular: "button.ytp-mute-button",
        muteButtonShorts: "button.YtdDesktopShortsVolumeControlsMuteIconButton"
    };

    let isClicked = false;

    function handleMiddleClick(event) {
        if (event.button !== 1 || isClicked) return;

        let muteButton = null;
        isClicked = true;
        setTimeout(() => isClicked = false, 200);
        event.preventDefault();

        if (event.target.matches(selectors.videoAreaRegularAndShorts)) {
            muteButton = window.location.href.includes("shorts") ? document.querySelector(selectors.muteButtonShorts) : document.querySelector(selectors.muteButtonRegular);
        } else if (event.target.closest(selectors.videoAreaRegularBlackBars1) || event.target.matches(selectors.videoAreaRegularBlackBars2)) {
            muteButton = document.querySelector(selectors.muteButtonRegular);
        } else if (event.target.matches(selectors.videoAreaShortsBlackBars)) {
            muteButton = document.querySelector(selectors.muteButtonShorts);
        }

        if (muteButton) muteButton.click();
    }

    function addEventListenersToVideos() {
        const elements = document.querySelectorAll(Object.values(selectors).join(", "));
        elements.forEach((element) => {
            element.removeEventListener('mousedown', handleMiddleClick);
            element.addEventListener('mousedown', handleMiddleClick);
        });
    }

    function waitForKeyElements(selector, actionFunction) {
        const observer = new MutationObserver((mutationsList) => {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList' && mutation.addedNodes.length) {
                    mutation.addedNodes.forEach((node) => {
                        if (node.matches && node.matches(selector)) {
                            actionFunction(node);
                        }
                    });
                }
            }
        });

        observer.observe(document, { childList: true, subtree: true });
        addEventListenersToVideos();
    }

    waitForKeyElements(Object.values(selectors).join(", "), (node) => {
        node.addEventListener('mousedown', handleMiddleClick);
    });
})();