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

YouTube

YouTubeのアイコン

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

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

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

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

YouTubeの動画上にマウスを乗せた時のGIF画像

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

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

インストール方法

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

Firefox・Edgeをご利用の場合

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

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

「Stylebot」のインストール手順画像

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

動画ホバー時の黒いグラデーションを防ぐCSS

YouTube」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

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

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:www.youtube.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。

これで、マウスを乗せた時でも、画面が暗くなりません。比較画像を貼っておきます。タイトルはこれまでどおり表示します。

YouTube動画マウスホバー時に暗くなるグラデーションを無効化した比較画像1

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

YouTube動画マウスホバー時に暗くなるグラデーションを無効化した比較画像2

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

YouTube動画マウスホバー時に暗くなるグラデーションを無効化した比較画像3

一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、「YouTube」のマウスホバー時に、画面がちょっと暗くなる仕様を解除する方法でした。

恐らく、こういう仕様の場合、CSSの「background-image」で設定されていることが多いと思います。その場合は、「background-image: none !important;」で削除できます。

以前、他サービスでも書いた気がするなと思い、調べてみるとありました。プライムビデオとABEMAです。

YouTube