PCでYouTube動画画面の明るさを調整/暗くする方法

- 日常 -
2023.02.28
youtube

YouTubeの動画が明るすぎる/暗すぎる。調整できないものか...?

そんな風に考えているかたへ。

僕は夜自宅にいる時は常に部屋を暗くしているので、YouTubeで見る動画がとてもまぶしく感じる悩みがありました。

YouTubeは標準機能でダークモードがありますが、再生する動画の輝度は投稿者の録画した動画次第です。動画の明るさを調整する機能がありません。

YouTube動画画面の明るさ調整

だいたいの動画はまぶしい。

ググるとGoogle Chromeの拡張機能でブラウザ自体の輝度を調整できるものはあるんですが、インストールしようとしたら「アクセスしたウェブサイト上にある自分の全データの読み取りと変更」権限を要求され、そんなん恐ろしすぎてインストールできんわと。

どうしようかと考えてみたんですが、まぁまぁ簡単な方法で自在に輝度を調整できることが分かりました

Google Chromeブラウザを使って説明していきます。

なお、この方法は以下2点の欠点があることをご承知ください。

欠点:

  1. 動画へアクセスする度にリセットされるので毎回手動で変更する必要がある
  2. PCでYoutubeを見る時のみ可能。スマホのYouTubeアプリでは不可

それではさっそく。

PCでYouTubeの動画画面を暗く/明るく調整する手順

まずは普通にYouTubeの動画再生ページへアクセスします。

動画説明欄など動画枠外にカーソルをおき、

  • マウスを使っている場合は右クリック
  • Macのトラックパッドの場合は2本指タップ

をすると、以下のようにサブメニューが開くので、「検証」を選択。※動画枠内で右クリック/2本指タップをすると以下とは別のメニューが開いてしまいます。

YouTube画面の明るさ調整

動画枠外を右クリック→「検証」

▼▼▼

すると、以下のように画面右側にHTMLなどがごちゃっと表示されたウィンドウが表示されます(デベロッパーツールといいます)。

  1. 赤枠の小さなカーソルマークをクリック
  2. その後、動画枠上へマウスカーソルをもっていきクリック
YouTube画面の明るさ調整

小カーソルクリック→動画枠上クリック

▼▼▼

すると、以下赤枠<video〜...</video>部分がハイライトされた状態になります。このvideoタグに対して、画面の輝度を指定するCSSを手動で追加することで明るさ調整を実現します。

YouTube画面の明るさ調整

▼▼▼

  1. 以下赤枠周辺をクリックする
  2. すると、新しい行が挿入される
YouTube画面の明るさ調整

element.style{...}の間をクリック→行が出現

▼▼▼

できた行にfilter: brightness(0.5);と入力します。

filter: brightness(0.5);と書いた瞬間に動画の明るさが半分に(暗く)なりました。

あとは直感で分かるかと思いますが、brightness( 数値 )の部分を小数点で刻んで好みの明るさ/暗さに調整するだけです。

  • brightness(1以上) → 通常より明るくなる
  • brightness(1) → 通常の明るさ=動画アクセス時の明るさ
  • brightness(0.5) → 半分の明るさ
  • brightness(0) → 真っ黒

HTMLやCSSを見慣れていないと難しく感じるかもしれませんが、何回か同じことを繰り返せば慣れます。

この方法はYouTubeに限らず使える

本記事ではYouTube限定の方法のように書きましたが、

  1. Chromeのデベロッパーツールを開いて動画部分を選択状態にする
  2. filter: brightness( 数値 )を追加する

という2ステップでだいたいのWebサイト上の動画輝度を調節できます。

YouTubeやその他のサイトで「この動画、明るすぎる/暗すぎる!」と感じる場合は試してみる価値はあるかと。

↑TOP