유튜브 극장모드

유튜브 화면을 자동으로 꽉 찬 화면으로 바꿉니다.

2022-05-15 기준 버전입니다. 최신 버전을 확인하세요.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name:ko           유튜브 극장모드
// @name              Youtube Theatermode
// @name:ru           Youtube Театральный режим
// @name:jp           Youtubeシアターモード
// @name:zh-CN        优酷影院模式
// @name:zh-TW        優酷影院模式

// @description:ko    유튜브 화면을 자동으로 꽉 찬 화면으로 바꿉니다.
// @description       Turn to wider Youtube screen automatially.
// @description:ru    Автоматически переключайтесь на более широкий экран Youtube.
// @description:jp    自動的に広いYouTube画面に移動します
// @description:zh-CN 自动转到更宽的 YouTube 屏幕
// @description:zh-TW 自動轉到更寬的 YouTube 屏幕

// @namespace         https://ndaesik.tistory.com/
// @version           2022.05.15.14.42
// @author            ndaesik
// @icon              https://lh3.googleusercontent.com/iLZyxGK7l1343U4E7eAfgKbRWW6qhzCJq-Z92M60JzCMntFyaFF2GUQVRxPhfGcy6qRISLjHv4fX1vtq0TZkZMAzBjM
// @match             https://www.youtube.com/*
// ==/UserScript==
let DEF = document.createElement("style"), TOG = document.createElement("style")
DEF.innerText = `
#chips-wrapper.ytd-feed-filter-chip-bar-renderer {top:56px}
[dark] .gstl_50.sbdd_a * {background-color:#232323!important; border-color:#282828!important}
[dark] .gsfs,[dark] .sbpqs_a{color:#FFF!important}
[dark] .sbqs_c:before {filter: invert(1)!important}
ytd-app:not([guide-persistent-and-visible]) [theater] #player.ytd-watch {height: 100vh!important; max-height: 100vh!important}
:is(ytd-watch-flexy[theater],ytd-watch-flexy[fullscreen]) #player-theater-container.ytd-watch-flexy,
ytd-app:not([guide-persistent-and-visible]) [theater] #player video {
width: 100%!important; height: 100vh!important; max-height: 100vh!important; max-width: 100%!important; left: 0!important}`
document.head.appendChild(DEF)
TOG.innerText = `
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!important}`
TOG.className = "TOGstyle"

"yt-navigate-finish load".split(" ").forEach((e) => {
    window.addEventListener(e, () => {
        document.head.appendChild(TOG)
        let full = setInterval(() => {((document.querySelector("#ytd-player")?.offsetWidth + 50) < window.innerWidth) ? document.querySelectorAll(".ytp-size-button").forEach(el=>el.click()) : clearInterval(full)},100)
        setTimeout(() => {if (document.querySelector("ytd-watch-flexy") == null) document.querySelector(".TOGstyle")?.remove()}, 100)
        setTimeout(() => {clearInterval(full)}, 10000)
        window.scrollTo(0, 0)
    });
});

window.addEventListener("mouseup", () => {
  setTimeout(() => {
      ((document.querySelector("#ytd-player").offsetWidth + 50) < window.innerWidth || document.URL.indexOf("watch") == -1) ?
      document.querySelector(".TOGstyle")?.remove() : document.head.appendChild(TOG)
  }, 100)
})