【YouTube】シークバーの赤紫グラデーションを元に戻すCSS

2025年3月16日YouTube

この記事では、PCウェブサイト版「YouTube」で2024年10月から動画プレーヤー内のプログレスバー（シークバー）が赤紫のグラデーションになりましたが、元の赤色に戻すCSSを紹介します。

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

PCウェブサイト版「YouTube」でいつものように動画を見ていたら、いつの間にか動画プレーヤー内のコントロールバー？シークバー？プログレスバー？が赤紫のグラデーションで表示されることに気づきました。

現在再生している地点に近い部分が紫で、遠くになるにつれて徐々に赤色になっています。以前は赤色の単色だった気がします。

X（旧Twitter）で調べてみると同じように変更された～って呟いている方がいらっしゃたったので、僕だけじゃなくYouTube側の仕様変更だと思います。

本記事で紹介するCSSを利用することでCSSを導入したブラウザ上だけの反映ですが元の赤色、あるいは全く別の好きな色に変更できます。

拡張機能・Firefoxアドオンを導入できるPCブラウザ専用、サイトの仕様変更によって使えなくなる可能性がある…といったように制限もありますが、今のデザインが気に食わない方参考にしてみてください。

YouTubeのシークバーを元の赤色に戻すCSS

スタイルシートを開く

「YouTube」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のCSSを書き込みます。

/*動画プレーヤー内のプログレスバーの色*/
.ytp-play-progress {
    background: #dd0000 !important;
}

「background」の隣に書いているHTMLカラーコードを変更することで任意の色にできます。

ウェブサイトにCSSを適用する場合「赤」とか「紫」とか日本語で指定しても動作しません。指定されたコードや「red」などの決められた形式で書き込む必要があります。

HTMLカラーコードでの指定が楽かなとは思います。上記の「#dd0000」は僕が適当に以前の色っぽい赤を指定しています。気に食わない方はこちらの記事を参考にして、自分が設定したい色のHTMLカラーコードを調べてその文字列に置き換えてください。

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

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

グラデーションが解除されたか確認

適当に動画を再生します（ナポリタン寿司のサンプル動画）。

動画プレーヤー内にマウスを置くとシークバー（プログレスバー）が表示されます。CSS導入後は赤紫のグラデーションではなく指定した色で表示されます。

一時的に無効化したい場合は、拡張機能メニュー内にある「Stylebot」アイコンを左クリック→「www.youtube.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。

感想

以上、PCウェブサイト版「YouTube」で2024年10月から動画プレーヤー内のプログレスバー（シークバー）が赤紫のグラデーションになりましたが、元の赤色に戻すCSSでした。

YouTube関連のCSS記事は他にも書いているので気になった方はカテゴリーをチェックしてみてください。

YouTube | ナポリタン寿司のPC日記

ナポリタン寿司のPC日記 | YouTubeカテゴリー記事一覧

 https://www.naporitansushi.com/category/stylebot-stylus/css-...