前言

YouTube 的劇院模式無法填滿視窗，全螢幕又會降低多工效率。

不僅播放器要填滿整個視窗，為了維持一體性，頂部的導航列也要隱藏。

導航列只於滑鼠滾輪向上滾動時顯示，游標若於導航列區域內則持續顯示。

稍微研究了一下後，發現不難實現，依然使用內容腳本就夠了。

實作過程

content.js

拉長播放器很簡單，只需要更改#player-theater-container的max-height屬性即可。

function resized()
{
  if(document.querySelector("#player-theater-container"))
  {
    document.querySelector("#player-theater-container").style.maxHeight = document.documentElement.clientHeight+"px"
  }
}

執行完resized()後，要觸發一下resize事件使讓播放器重繪。

若播放器出現錯誤（ytp-error）則重新載入頁面，來消除 AdBlock 的 Bug。

利用原生的劇院模式，可以省去對寬度的調整，強制進入劇院模式的方法不只一種。

有操作 Cookie 的方法，不過超過了內容腳本的權限，需動用背景頁（background）。

用內容腳本實現的方法很簡單，就是在非劇院模式時，點擊ytp-size-button按鈕。

function loaded()
{
  resized()
  window.dispatchEvent(new Event("resize"))

  if(document.querySelector("#movie_player > div.ytp-error"))
  { window.location.reload() }

  if(document.querySelector("button.ytp-size-button"))
  {
    if(document.querySelector("button.ytp-size-button").title == "劇院模式 (t)")
    { document.querySelector("button.ytp-size-button").click() }
  }
}

YouTube 在同一分頁導向時，只會更改網址而不會重新載入頁面。

以致於內容腳本不會隨著導向至新頁面而被重新載入。

不過，導向完成後會觸發yt-navigate-finish事件，監聽該事件並呼叫loaded()即可。

也透過監聽resize並呼叫resized()實現動態調整播放器大小。

console.log("Full YouTube 已載入")

loaded()

window.addEventListener("yt-navigate-finish", loaded)
window.addEventListener("resize", resized)

建立滑鼠滾輪滾動事件，若向上滾動（deltaY < -1）則將導航列設為display: block。

若搜尋列沒有被focus，導航列一秒後自動恢復隱藏狀態。

document.body.onmousewheel = function(event)
{
  if(event.deltaY < -1 && document.querySelector("ytd-app[is-watch-page] #masthead-container"))
  {
    if(document.querySelector("ytd-app[is-watch-page] #masthead-container").style.display == "")
    {
      document.querySelector("ytd-app[is-watch-page] #masthead-container").style.display = "block"
      setTimeout(function()
      {
        if(!document.querySelector("input#search#search:focus"))
        { document.querySelector("ytd-app[is-watch-page] #masthead-container").style.display = "" }
      }, 1000)
    }
  }
}

若搜尋列被focus，則將導航列設為display: block，反之隱藏。

if(document.querySelector("input#search#search"))
{
  document.querySelector("input#search#search").addEventListener("blur", function()
  {
    document.querySelector("ytd-app[is-watch-page] #masthead-container").style.display = ""
  })

  document.querySelector("input#search#search").addEventListener("focus", function()
  {
    document.querySelector("ytd-app[is-watch-page] #masthead-container").style.display = "block"
  })
}

style.css

導航列預設隱藏，游標若於導航列區域內，才將導航列設為display: block。

也消除導航列之於播放器的margin-top間距，使用!important強制覆蓋。

ytd-app[is-watch-page] #masthead-container{
  display: none;
}

ytd-app[is-watch-page] #masthead-container:hover{
  display: block;
}

ytd-app[is-watch-page] #page-manager.ytd-app{
  margin-top: 0px !important;
}