ろぼいんブログ

YouTubeの背景を動画に合わせてダイナミックに変える・光らせる「Ambient light for YouTube」

約4分で読めます
YouTubeの動画プレイヤーにBig Buck Bunnyが表示されており、その映像の光がAmbient Light for YouTubeの機能によってページ全体に拡散しているようすのスクリーンショット
Ambient Light for YouTubeを有効化したようす。関連動画欄は加工済み
動画:© copyright 2008, Blender Foundation / www.bigbuckbunny.org

YouTubeには、再生中の動画に合わせてUIの背景をダイナミックに光らせて没入感を高める「シネマティックライティング(アンビエントモード)」があります。

この記事では、それを拡張してYouTubeのページ全体を光らせられるブラウザー拡張機能「Ambient Light for YouTube」を紹介します。Ambient Light for YouTubeでは光をどれだけ拡散させるかを変更でき、とくに最大設定でミュージックビデオを視聴すると圧巻です。

広告
目次

Ambient Light for YouTubeとは?

Googleは2022年にYouTubeのデザインを刷新した際に、動画に合わせて画面の背景色を変化させる「シネマティックライティング」(「アンビエントモード」とも)を導入しました。

しかし、シネマティックライティングはGoogle自身が「淡い色に画面の背景色が微妙に変化」すると述べているように、背景色が淡く変化するだけです。筆者は日常的にシネマティックライティングを有効化した状態でYouTubeを視聴していますが、没入感を多少高める効果はあるものの、効果は限定的だと感じています。

YouTubeの古いUIと、シネマティックライティングを有効化した新しいUIの比較画像
YouTubeの2022年のデザイン刷新前後の比較画像
画像:Google

そんな中、ここ数日にわたってXで注目を集めている無料のブラウザー拡張機能が「Ambient Light for YouTube」です。

Ambient Light for YouTubeを実際にインストールしてYouTubeを再生したようすがこちら。

通常は動画の周囲が淡く発光する程度のシネマティックライティングですが、Ambient Light for YouTubeをインストールすると、画面全体がダイナミックに発光します。この動画は動きが穏やかですが、とくに動きや点滅の激しいミュージックビデオなどを再生すると圧巻です。

広告

GitHubのコミット履歴によると、Ambient Light for YouTubeは2017年から開発されており、YouTubeのシネマティックライティングよりも先に公開されていることになります。もしかしたら、Googleもこの拡張機能を参考にしてシネマティックライティングを実装したのかもしれません。

Ambient Light for YouTubeのインストール方法と使い方

Ambient Light for YouTubeは、Google Chrome、Microsoft Edge、Mozilla Firefox、Opera用の拡張機能が用意されています。筆者はFirefox系のZen Browserで動作確認していますが、ほかのFirefox系のブラウザーやBraveなどのChromium系のブラウザーでも利用できると思われます。

まずは、お使いのブラウザーに応じたバージョンのAmbient Light for YouTubeをインストールしてください。

インストールすると、YouTubeの再生メニューに[AL]という青いバッジの付いた設定ボタンが表示されるようになります。この設定ボタンをクリックすると、Ambient Light for YouTubeのさまざまな設定を変更できます。

YouTubeの動画プレイヤーの上にAmbient Light for YouTubeの設定パネルが表示されているようすのスクリーンショット

デフォルトの状態ではYouTubeの標準のシネマティックライティングとそれほど違いを感じられませんが、この設定から[Spread]の数値を大きくすると画面全体がダイナミックに発光するようになります。前掲の動画は、Ambient Light for YouTubeの設定で[Spread]を最大値の400%に変更し、ほかの値はデフォルトにして録画したものです。

広告

Ambient Light for YouTubeには、ほかにも[Blur][Fade in duration][Enable in layouts][Appearance (theme)]などの設定があるので、さまざまな値に変更して好みの外観を探すとよいでしょう。

スマホアプリで使える?

Ambient Light for YouTubeはブラウザー拡張機能なので、スマートフォンのYouTubeアプリでは利用できません。

Android版のFirefoxやEdgeなどの一部のブラウザーでは拡張機能を利用できますが、Ambient Light for YouTubeはAndroid版Firefoxにインストールできませんでした。また、Android版Edgeについては、Ambient Light for YouTubeをインストールできるものの設定ボタンが表示されず、効果が適用されているようには見えませんでした。なお、Android版EdgeでYouTubeをPC表示にすれば利用できましたが、PC版YouTubeはスマートフォンで操作することを想定していないのであまり実用的ではありません。

無料で使える?

Ambient Light for YouTubeは、ソースコードが公開されていてすべての機能を無料で利用できる、オープンソースのブラウザー拡張機能です。

GitHubリポジトリーにはKo-fiの寄付リンクがあるので、Ambient Light for YouTubeを気に入った場合は寄付を検討してみるとよいでしょう。

広告

負荷は重い?

GitHubリポジトリーのREADMEによると、Ambient Light for YouTubeを利用する際には、PassMark Video Card Benchmarkで1,000ポイント以上のスコアを獲得しているGPUを推奨するとのことです。

PassMark Video Card Benchmarkで23,166ポイントのNVIDIA GeForce RTX 3070 Tiを搭載した筆者のPCでは、問題なく利用できました。また、Google Pixel 8にインストールしたMicrosoft EdgeでPC版のYouTubeを開いた場合もとくに負荷を感じなかったので、一般的なPCでは問題なく利用できると思われます。

この記事の検証内容と情報源

検証環境

  • OS:Windows 11
  • ブラウザー:Zen Browserバージョン1.22.3b
  • Ambient Light for YouTube:Firefox版バージョン2.38.17

検証内容

Zen BrowserのAmbient Light for YouTubeをインストールして動作を確認しました。また、Android版のMicrosoft EdgeでPC版のYouTubeを開いた場合にも動作することを確認しました。

最終検証日

参考リンク

記事をシェア

フォローして最新情報を入手

Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。

Googleの優先ソースとして追加するGoogleの優先ソースとして追加する
著者のアイコン画像

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。