【YouTube】プログレスバー上部にある波グラフの非表示CSS

​​YouTube

YouTubeのアイコン

この記事では、2022年5月から追加されたPCウェブサイト版「YouTube」のプログレスバー（再生バー）にマウスを置いた時、上部に表示される白い波グラフ（エンゲージメントグラフ）を非表示にするCSSを紹介します。

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

【YouTube】プログレスバー上部にある波グラフの非表示CSS

2022年5月頃から、YouTubeの一部動画プレーヤー内にあるプログレスバー（再生バー）に、白い波グラフが表示されるようになりました。

YouTubeのプログレスバー（再生バー）上部に表示される白い波グラフ画像
参考:YOASOBI「アイドル」 Official Music Video

エンゲージメントグラフと呼ばれるもので、他の視聴者がどの場面を見ているか視覚化したグラフです。波が高いほど、多くの視聴者が見ている人気のシーンということになります。

通常は表示されず、マウスをプログレスバー？再生バー？シークバー？の上に乗せた時だけ表示されます。全ての動画で表示されるわけではなく、多くの人が見ている人気動画やMV動画に表示されます。

僕は特に気にしていなかったんですが、読者様から消すことはできませんか？と質問をいただいたので、CSSで消す方法を紹介します。「他の人が見ている情報とかどうでもいい！」という方、参考にしてみてください。

本記事は拡張機能を利用できるPCブラウザ向けです。スマホやタブレットなどのアプリ版ではできません。いつでもオンオフできます。自信の環境上で、他の人には影響しません。

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

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

再生バー（シークバー）上部の白い波グラフを消すCSS

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

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

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。下記コードは、透明にするコードです。色を変えたい場合は、こちらを参考にしてみてください。

/*コントロールバー上部の波グラフ非表示*/
.ytp-progress-bar-container .ytp-heat-map-container {
    visibility: collapse !important;
}
ポイント

CSSは、サイト側の仕様変更により使えなくなる時があります。その場合、お手数ですが、問い合わせより教えていただければ幸いです。僕ができる範囲で修正したいと思います。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

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

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

適当に白い波グラフ（エンゲージメントグラフ）が表示される動画を開きます。例として「YOASOBI「アイドル」 Official Music Video」で試してみます。

動画を再生してプレーヤー内のコントロールバーにマウスを乗せます。CSS導入後は表示されなくなります。どこが人気のシーンか分からなくなります。

YouTubeのプログレスバー（再生バー）上部に表示される白い波グラフをCSSで非表示にした画像
参考:YOASOBI「アイドル」 Official Music Video

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

非表示ではなく、色や透明度を調整するCSS

どーせなら非表示ではなく、色や透明度を調整するCSSも書いておきます。

/*コントロールバー上部の波グラフの色・透明度*/
.ytp-progress-bar-container .ytp-heat-map-container svg rect {
    fill: #FF0202 !important;
    fill-opacity: 0.2 !important;
}

上記CSSを適用すると、グラフの色が「赤」になります。「fill: red」の部分で色を変えられます。HTMLカラーコードで指定します。こちらのサイトで調べられます。

「fill-opacity」で透明度を調整できます。はっきり見たい場合は、「fill-opacity: 1 !important;」にします。0～1の間で指定できます。

YouTubeのプログレスバー（再生バー）上部に表示される白い波グラフをCSSでカスタマイズした画像

感想

以上、PCウェブサイト版「YouTube」のプログレスバー（再生バー）にマウスを置いた時、上部に表示される白い波グラフ（エンゲージメントグラフ）を非表示にする方法（CSS）でした。

​​YouTube