YouTube Fullscreen Recommended Videos Menu Script

YouTube uses multiple scripts and event listeners to manage the appearance of the recommended videos menu in fullscreen mode. The core functionality is implemented through JavaScript code that tracks mouse scroll events and dynamically loads recommendations.

Contents

• YouTube Architecture Overview
• Main Scripts and Event Listeners
• Code Research Methods
• Menu Blocking Methods
• Development Tools
• User Script Examples
• Important Warnings

YouTube Architecture Overview

YouTube is a complex web application built on modern JavaScript architecture. In fullscreen mode, the site uses several components to manage the interface:

• YouTube Player API - the primary API for controlling the video player
• React components - for building the dynamic interface
• Event Listeners - for tracking user actions
• AJAX requests - for dynamically loading content

The recommended videos menu in fullscreen mode is part of this architecture and activates under certain conditions, including mouse wheel scrolling.

Main Scripts and Event Listeners

Event listeners tracking mouse scrolling

The main events that can control the menu appearance:

// Examples of possible event listeners
document.addEventListener('wheel', handleWheelEvent, { passive: false });
document.addEventListener('scroll', handleScrollEvent);
videoElement.addEventListener('wheel', handleVideoWheel);

Key interface components

1. Full-screen container - fullscreen mode container
2. Recommended videos overlay - recommendations overlay
3. Scroll detection logic - scroll detection logic

Main script files

YouTube divides code into modules, which may include:

• www-base.js - basic functions and utilities
• www-player.js - player functionality
• www-watch.js - video watch page
• www-fullscreen.js - fullscreen mode

Code Research Methods

Using developer tools

1. Opening DevTools

   • Press F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac)
   • Go to the “Elements” tab

2. Analyzing events

   • Use the “Event Listeners” tab in DevTools
   • Find elements related to scrolling
   • Check event listeners on player elements

3. DOM inspection

   • Find the element with recommendations when the menu appears
   • Examine its structure and classes
   • Trace parent elements

Code search

1. Keyword search

   • recommended
   • fullscreen
   • scroll
   • wheel

2. XHR request analysis

   • Open the “Network” tab in DevTools
   • Find requests loading recommendations
   • Analyze request parameters

Browser extensions for debugging

You can use extensions like:

• Tampermonkey for injecting user scripts
• ScriptSafe for script control
• uBlock Origin for element blocking

Menu Blocking Methods

CSS styles for hiding

/* Hiding recommendations via CSS */
.ytp-ce-element {
    display: none !important;
}

JavaScript interception

// Intercepting wheel events
const originalAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, listener, options) {
    if (type === 'wheel' && this.closest('.html5-video-player')) {
        console.log('Wheel event intercepted on player');
        return;
    }
    originalAddEventListener.call(this, type, listener, options);
};

User scripts (Tampermonkey/Greasemonkey)

// ==UserScript==
// @name         YouTube Fullscreen Blocker
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Blocks the recommendations menu on scroll in fullscreen mode
// @author       You
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    function blockRecommendedMenu() {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                mutation.addedNodes.forEach((node) => {
                    if (node.classList && node.classList.contains('ytp-ce-element')) {
                        node.style.display = 'none';
                    }
                });
            });
        });
        
        const player = document.querySelector('.html5-video-player');
        if (player) {
            observer.observe(player, { childList: true, subtree: true });
        }
    }
    
    // Run on DOM change
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', blockRecommendedMenu);
    } else {
        blockRecommendedMenu();
    }
})();

Development Tools

Browser extensions

1. Tampermonkey - for managing user scripts
2. uBlock Origin - for blocking elements and requests
3. ScriptSafe - for controlling script execution
4. BrowserSpy - for analyzing web page functionality

Online tools

• GitHub - for finding existing solutions
• Stack Overflow - for discussing problems
• Reddit - communities dedicated to YouTube customization

User Script Examples

Complete recommendation blocking

// Blocks recommendation loading in fullscreen mode
(function() {
    const blockFunction = () => {
        const recommendedContainer = document.querySelector('.ytp-ce-element');
        if (recommendedContainer) {
            recommendedContainer.remove();
        }
    };
    
    // DOM change observer
    const observer = new MutationObserver(blockFunction);
    observer.observe(document.body, { childList: true, subtree: true });
    
    // Check on fullscreen mode change
    document.addEventListener('fullscreenchange', blockFunction);
})();

Mouse wheel behavior modification

// Changing mouse wheel behavior in fullscreen mode
document.addEventListener('wheel', (e) => {
    if (document.fullscreenElement && e.target.closest('.html5-video-player')) {
        e.preventDefault();
        // Add your custom scrolling logic here
    }
}, { passive: false });

Important Warnings

Legal aspects

• Terms of Service violation - modifying YouTube may violate their terms of service
• Copyright issues - changing the interface may have legal consequences
• Security - installing third-party scripts may pose security risks

Technical risks

• YouTube updates - changes to their code may break your scripts
• Performance - extra scripts may slow down browser performance
• Compatibility - scripts may conflict with other extensions

Alternative solutions

• Using YouTube Premium for an ad-free experience
• Finding alternative platforms with simpler interfaces
• Using official YouTube settings to control the interface

Sources

1. YouTube Developers - Player API Documentation
2. MDN Web Docs - Event Listeners
3. GitHub - YouTube Scripts Collection
4. Stack Overflow - YouTube Customization
5. Reddit - r/youtube

Conclusion

• The main logic for the recommended videos menu is managed through JavaScript event listeners that track mouse scroll events in fullscreen mode
• To research the code, use browser developer tools, analyze the DOM and network requests
• Blocking the menu is possible through CSS, JavaScript interception, or user scripts
• It’s important to consider legal risks and potential compatibility issues when modifying YouTube
• It’s recommended to first study existing solutions on GitHub and forums before creating your own scripts

For more precise identification of specific YouTube scripts, an in-depth analysis of their minified JavaScript code using modern decompilation and analysis tools is recommended.