【YouTube】動画マウスホバー時の黒いグラデーション排除CSS

2023年1月17日YouTube

この記事では、「YouTube」の動画プレーヤーにマウスを乗せると表示される黒いグラデーションを非表示にするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を使います。

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

動画タイトルや操作画面を見やすくするための仕様です。こちらをCSSで削除してみます。マウスを乗せても暗くならず、明るいままで動画タイトル等が表示されます。

「Stylebot（スタイルボット）」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

1. インストール方法
2. 動画ホバー時の黒いグラデーションを防ぐCSS
3. 感想

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。Chromeウェブストアからインストールできます。

Stylebot - Chrome ウェブストア

ウェブの外観を瞬時に変更

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

https://www.naporitansushi.com/stylebot/

動画ホバー時の黒いグラデーションを防ぐ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です。右上の「×」でスタイルシートを閉じます。