【YouTube】動画マウスホバー時の黒いグラデーション排除CSS
本記事で紹介するCSSを使えば、PCウェブサイト版「YouTube」のマウスホバー時の黒い帯?グラデーション?を排除できます。通常、動画プレーヤーを最大化した状態で、マウスを乗せると、動画タイトルとプログレスバーの周囲が暗くなります。

動画タイトルや操作画面を見やすくするための仕様です。こちらをCSSで削除してみます。マウスを乗せても暗くならず、明るいままで動画タイトル等が表示されます。
「Stylebot(スタイルボット)」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
動画ホバー時の黒いグラデーションを防ぐCSS
「YouTube」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*全画面再生中の動画ホバー時の黒いグラデーションを防ぐ*/
.ytp-big-mode .ytp-gradient-top, .ytp-big-mode .ytp-gradient-bottom {
background-image: none !important;
}
/*通常画面再生中の動画ホバー時の黒いグラデーションを防ぐ*/
.ytp-gradient-top,.ytp-gradient-bottom {
background-image: none !important;
}
全画面時と通常時で使うCSSが異なります。全画面上だけでグラデーションを消したい場合は、上記CSSの「全画面再生中の動画ホバー時の黒いグラデーションを防ぐ
」だけ書き込みます。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:www.youtube.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで、マウスを乗せた時でも、画面が暗くなりません。比較画像を貼っておきます。タイトルはこれまでどおり表示します。

メディアコントロール(プログレスバー)の部分も同様に、グラデーションが削除されます。動画によっては背景と同化して見づらくなるという点には注意です。

「通常画面再生中の動画ホバー時の黒いグラデーションを防ぐ
」も書き込んだ場合、全画面ではなく通常画面でも、グラデーションがなくなります。

一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、「YouTube」のマウスホバー時に、画面がちょっと暗くなる仕様を解除する方法でした。
恐らく、こういう仕様の場合、CSSの「background-image
」で設定されていることが多いと思います。その場合は、「background-image: none !important;
」で削除できます。
以前、他サービスでも書いた気がするなと思い、調べてみるとありました。プライムビデオとABEMAです。