☰

Greasy Fork is available in English.

Youtube Fullscreen Mode

Automatically switch YouTube screens to 100 height and 100 width screens.

// ==UserScript==
// @name:ko           유튜브 풀스크린
// @name              Youtube Fullscreen Mode
// @name:ru           Youtube Полный режим
// @name:ja           Youtubeフルスクリーンモードの
// @name:zh-CN        优酷全屏模式
// @name:zh-TW        優酷全屏模式

// @description:ko    유튜브 화면을 자동으로 꽉 찬 화면으로 바꿉니다.
// @description       Automatically switch YouTube screens to 100 height and 100 width screens.
// @description:ru    Автоматическое переключение экрана на YouTube на экран высотой 100 и шириной 100.
// @description:ja    ユーチューブ画面を高さ100、広さ100画面に自動転換。
// @description:zh-CN YouTube画面自动转换成100高、100宽的画面。
// @description:zh-TW YouTube畫面自動轉換成100高、100寬的畫面。

// @namespace         https://ndaesik.tistory.com/
// @version           2025.01.01.1000
// @author            ndaesik
// @icon              https://lh3.googleusercontent.com/iLZyxGK7l1343U4E7eAfgKbRWW6qhzCJq-Z92M60JzCMntFyaFF2GUQVRxPhfGcy6qRISLjHv4fX1vtq0TZkZMAzBjM
// @match             *://*.youtube.com/*
// @grant             window.focus
// ==/UserScript==

const suggestBoxToDarkCSS = document.createElement('style');
suggestBoxToDarkCSS.innerText = `
body{overflow-y:auto;}
[dark] {color-scheme: dark;}`.replaceAll(';','!important;')

const fullscreenVideoCSS = document.createElement('style');
fullscreenVideoCSS.innerText = `
ytd-app:not([guide-persistent-and-visible]) [theater] #player video,
:is(ytd-watch-flexy[theater],ytd-watch-flexy[fullscreen]) #full-bleed-container {
height: 100vh; max-height: 100vh; min-height: 100vh;}
ytd-watch-flexy[theater] {scrollbar-width: none;}
ytd-watch-flexy[theater]::-webkit-scrollbar {display: none;}
ytd-watch-flexy[theater] ~ body {scrollbar-width: none;-ms-overflow-style: none;}
ytd-watch-flexy[theater] ~ body::-webkit-scrollbar {display: none;}`.replaceAll(';','!important;')

const autoHideTopCSS = document.createElement('style');
autoHideTopCSS.innerText = `
#masthead-container.ytd-app:hover, #masthead-container.ytd-app:focus-within {width:100%;}
#masthead-container.ytd-app,
#masthead-container.ytd-app:not(:hover):not(:focus-within) {width:calc(50% - 150px);}
#masthead-container.ytd-app:not(:hover):not(:focus-within) {transition:width 0.4s ease-out 0.4s;}
ytd-app:not([guide-persistent-and-visible]) :is(#masthead-container ytd-masthead, #masthead-container.ytd-app::after) {transform: translateY(-56px); transition: transform .1s .3s ease-out;}
ytd-app:not([guide-persistent-and-visible]) :is(#masthead-container:hover ytd-masthead, #masthead-container:hover.ytd-app::after, #masthead-container:focus-within ytd-masthead) {transform: translateY(0px);}
ytd-app:not([guide-persistent-and-visible]) ytd-page-manager {margin-top: 0;}`.replaceAll(';','!important;')
autoHideTopCSS.className = "autoHideTopCSS";

const $ = {
    elements: { ytdApp: null, player: null, chatFrame: null },
    update() {
        this.elements.ytdApp = document.querySelector('ytd-app');
        this.elements.player = document.querySelector('#ytd-player');
        this.elements.chatFrame = document.querySelector('ytd-live-chat-frame');
    }
};

let scrollTimer = null, isContentHidden = false;

const isWatchPage = () => document.URL.includes('/watch?');

const isTheaterMode = () => {
    $.update();
    const { ytdApp, player, chatFrame } = $.elements;
    return ytdApp && player && isWatchPage() &&
        (window.innerWidth - ytdApp.offsetWidth + player.offsetWidth +
        (chatFrame && !chatFrame.attributes.collapsed ? chatFrame.offsetWidth : 0)) === window.innerWidth;
};

const shouldShowAutoHideCSS = () => {
    const scrollPosition = window.scrollY;
    const viewportHeight = window.innerHeight + 56;
    return isWatchPage() && isTheaterMode() && scrollPosition <= viewportHeight;
};

const updateAutoHideCSS = () => {
    const existingCSS = document.querySelector('.autoHideTopCSS');
    shouldShowAutoHideCSS() ? !existingCSS && document.head.appendChild(autoHideTopCSS) : existingCSS?.remove();
};

const checkConditions = () => {
    const watchFlexy = document.querySelector('ytd-watch-flexy');
    const primaryContent = document.querySelector('#primary');
    const secondaryContent = document.querySelector('#secondary');
    const isTheater = watchFlexy?.hasAttribute('theater');
    const isScrollTop = window.scrollY === 0;

    if (!primaryContent || !secondaryContent || !isTheater) return;

    if (isScrollTop && !isContentHidden) {
        if (scrollTimer) clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            primaryContent.style.display = 'none';
            secondaryContent.style.display = 'none';
            isContentHidden = true;
        }, 2000);
    } else if (!isScrollTop && scrollTimer) {
        clearTimeout(scrollTimer);
        scrollTimer = null;
        isContentHidden && (primaryContent.style.display = '', secondaryContent.style.display = '', isContentHidden = false);
    }
};

const showContent = () => {
    const primaryContent = document.querySelector('#primary');
    const secondaryContent = document.querySelector('#secondary');
    if (isContentHidden && primaryContent && secondaryContent) {
        primaryContent.style.display = '';
        secondaryContent.style.display = '';
        isContentHidden = false;
        scrollTimer && (clearTimeout(scrollTimer), scrollTimer = null);
        setTimeout(() => checkConditions(), 1000);
    }
};

const alwaysTheaterMode = () => {
    const interval = setInterval(() => isTheaterMode() ? clearInterval(interval) :
        document.querySelectorAll('.ytp-size-button')?.forEach(e => e.click()), 100);
    setTimeout(() => clearInterval(interval), 10000);
};


const setupEventListeners = () => {
    window.addEventListener('scroll', () => requestAnimationFrame(checkConditions));
    document.addEventListener('click', () => requestAnimationFrame(showContent));
    document.addEventListener('wheel', () => requestAnimationFrame(showContent));
    const observer = new MutationObserver(() => requestAnimationFrame(checkConditions));
    const watchFlexy = document.querySelector('ytd-watch-flexy');
    watchFlexy && observer.observe(watchFlexy, { attributes: true, attributeFilter: ['theater'] });
};

let previousUrl = window.location.href;
window.addEventListener('yt-navigate-start', () => {
    const currentUrl = window.location.href;
    currentUrl !== previousUrl && !previousUrl.includes('/watch') && currentUrl.includes('/watch') && window.location.reload();
    previousUrl = currentUrl;
});

['yt-navigate-finish', 'load', 'unload', 'locationchange'].forEach(event =>
    window.addEventListener(event, () => {
        document.head.appendChild(suggestBoxToDarkCSS);
        document.head.appendChild(fullscreenVideoCSS);
        alwaysTheaterMode();
        window.scrollTo(0, 0);
        updateAutoHideCSS();
        setupEventListeners();
        checkConditions();
    }));

window.addEventListener('click', () => setTimeout(updateAutoHideCSS, 100));
window.addEventListener('scroll', () => requestAnimationFrame(updateAutoHideCSS));