YouTube のコントロールバーを動画の外に常に表示する
Windows10・Brave ブラウザにて検証。個人的な好みでゴリゴリイジった結果の備忘。
YouTube を見ていて、通常だと動画の上にコントロールバーが重なるのが嫌で、以下の拡張機能を入れている。
- 'Improve YouTube!' (Video & YouTube Tools)🎧 - Chrome ウェブストア
- デザイン等々を調整する拡張機能。色々デザインを変えられるのでコレをベースに設定している
- OutsideBar - Chrome ウェブストア
- コントローバーを動画に重ねないようにする
Improve YouTube の「常にプログレスバーを表示する」設定は有効でも無効でもどちらでも。「OutsideBar」によってコントロールバーを外出しする。
しかし、「OutsideBar」は動画部分にカーソルが重なっていない時はコントロールバーが閉じてしまうので、ガクガクする時があって嫌だった。
そこで、Stylish を併用して次のスタイルシートを当ててやることで対応した。
- Stylish - ウェブサイト用カスタムテーマ - Chrome ウェブストア
- 任意のサイトに任意の CSS を追加できる
/* コントロール部分を常に表示してフォーカスアウトしてもガクガクさせない */
.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」にして、
https://youtube.comhttps://www.youtube.com
辺りを入れておけば良い。
