Greasy Fork is available in English.

Youtube Theater Fill Up Window

make theater mode fill up window

  1. // ==UserScript==
  2. // @name Youtube Theater Fill Up Window
  3. // @name:zh-TW Youtube Theater Fill Up Window
  4. // @namespace https://greasyfork.org/scripts/454092
  5. // @version 1.1.2
  6. // @description make theater mode fill up window
  7. // @description:zh-TW 讓劇院模式填滿視窗
  8. // @author Derek
  9. // @match *://www.youtube.com/*
  10. // @grant none
  11. // @noframes
  12. // ==/UserScript==
  13.  
  14. const autoTheater = 0 //change the value into 「1」 to make Theater mode default!
  15.  
  16. const $ = (element) => document.querySelector(element)
  17.  
  18. const getScrollbarWidth = () => {
  19. let dummy = document.createElement('div')
  20. document.body.appendChild(dummy)
  21. dummy.style.overflowY = 'scroll'
  22. const clientWidth = dummy.clientWidth
  23. const offsetWidth = dummy.offsetWidth
  24. dummy.remove()
  25. return offsetWidth - clientWidth + 1
  26. }
  27.  
  28. const css = `
  29. #masthead-container {
  30. display: none !important;
  31. }
  32. ytd-page-manager {
  33. margin: 0 !important;
  34. }
  35. #full-bleed-container {
  36. min-height: 100vh !important;
  37. min-width: calc(100vw - ${getScrollbarWidth()}px) !important;
  38. }
  39. `
  40.  
  41. const theaterMode = () => {
  42. if ($('#player-full-bleed-container > #player-container') && !$('#theater-mode')) {
  43. let theaterStyle = document.createElement('style')
  44. theaterStyle.setAttribute('type', 'text/css')
  45. theaterStyle.setAttribute('id', 'theater-mode')
  46. theaterStyle.textContent = css
  47. document.head.appendChild(theaterStyle)
  48. } else if (!$('#player-full-bleed-container > #player-container') && $('#theater-mode')) $('#theater-mode').remove()
  49. }
  50.  
  51. const main = () => {
  52. if (window.location.href.includes('/watch?v=')) {
  53. if (autoTheater === 1 && !$('ytd-watch-flexy').isTheater_()) {
  54. setTimeout(() => { $('.ytp-size-button').click() }, 500)
  55. }
  56. if ($('ytd-watch-flexy').isTheater_()) theaterMode()
  57. const observer = new MutationObserver(theaterMode)
  58. observer.observe($('#player-full-bleed-container'), { attributes: false, childList: true })
  59. } else if ($('#theater-mode')) $('#theater-mode').remove()
  60. }
  61.  
  62. document.addEventListener('yt-navigate-finish', main)