YouTube のコントロールバーを動画の外に常に表示する

Windows10・Brave ブラウザにて検証。個人的な好みでゴリゴリイジった結果の備忘。

YouTube を見ていて、通常だと動画の上にコントロールバーが重なるのが嫌で、以下の拡張機能を入れている。

Improve YouTube の「常にプログレスバーを表示する」設定は有効でも無効でもどちらでも。「OutsideBar」によってコントロールバーを外出しする。

しかし、「OutsideBar」は動画部分にカーソルが重なっていない時はコントロールバーが閉じてしまうので、ガクガクする時があって嫌だった。

そこで、Stylish を併用して次のスタイルシートを当ててやることで対応した。

/* コントロール部分を常に表示してフォーカスアウトしてもガクガクさせない */
.ytp-progress-bar-container,
html[it-always-show-progress-bar="true"] .html5-video-player:not(.it-mini-player).ytp-autohide .ytp-chrome-bottom .ytp-progress-bar-container {
  bottom: 47px !important;
}
.ytp-chrome-controls,
html[it-always-show-progress-bar="true"] .html5-video-player:not(.it-mini-player).ytp-autohide .ytp-chrome-bottom .ytp-chrome-controls {
  opacity: 1 !important;
}

単純な CSS クラス指定だけだと詳細度で勝てないので、開発者ツールを見て詳細度が勝てる指定を併記している。要はマウスホバー時のスタイルを常に適用するようにしている。

「適用先」は「次で始まる URL」にして、

辺りを入れておけば良い。