YouTubeの右サイドバーの横幅が狭くなる原因と対策

現象・状況

私は複数のFirefox

• Firefox通常版(デスクトップ版)：プロファイル3つ※ビジネス用・非ビジネス用・追加プラグインなし ＆ 追加テーマなしのテスト用
• Firefox Developer Edition：プロファイル1つ※ビジネス用
• Firefox Nightly：プロファイル1つ※多段タブの確認・たまにYouTube遅延の確認用
• Firefox Portable：プロファイル1つ※万が一のバックアップ用、滅多に使わない

を使っています。

普段4Kモニターにて、

• 左側に横幅1800pxのFirefox通常版
• 右側に横幅1800pxのFirefox Developer Edition
• デスクトップの1番左側と中央にわざと少し余白ができるようにして

Firefoxを2つ表示して使っています。

Firefox Nightlyはたいていの場合1800 x 1900pxで左右中央・デスクトップ下にほぼ張り付く位置で開いて、その時はFirefoxとFirefox Developer Editionはウィンドウシェードで閉じてウィンドウタイトルだけの状態にしています。

上記画像キャプチャは後述の「私の解決方法」実行後のFirefox Nightly(通常ウィンドウ)です。

ある時Firefox NightlyにてYouTubeのプレイリストを再生したら、YouTube内の右サイドバーの横幅が異常に狭くなっていることに気づきました。

私の各FirefoxでのYouTube再生を確認してみた結果、

• YouTubeの右サイドバーが狭くなったのはFirefox Nightlyの通常ウィンドウだけ
• Firefox Nightlyのプライベートウィンドウでは狭くならずに本来の横幅
• Firefox通常版およびFirefox Developer Editionも狭くならずに本来の横幅

という状況でした。

■【修正前】Firefox Nightly(通常ウィンドウ)では、YouTubeの右サイドバーの横幅が超狭い

「本来の右サイドバーの横幅」よりかなり狭く、プレイリストや関連動画のタイトルが省略されすぎて意味不明です。

■Firefox Nightly(プライベートウィンドウ)でのYouTubeの右サイドバーの状態

「本来の右サイドバーの横幅」と比べて左右のmarginがたぶん5～10px狭く、あるいは動画再生ウィンドウのmargin-rightがたぶん10～20px狭く、そのぶん動画再生ウィンドウの横幅が広くなっています。※uBlock OriginおよびuserChrome.css内の何かが影響している可能性もあります。

■Firefox Developer EditionでのYouTubeの右サイドバーの状態

「本来の右サイドバーの横幅」と比べて左右のmarginがたぶん2～5px狭く、あるいは動画再生ウィンドウのmargin-rightがたぶん4～10px狭く、そのぶん動画再生ウィンドウの横幅が広くなっています。※uBlock OriginおよびuserChrome.css内の何かが影響している可能性もあります。

ちなみに当ページの解決策を実行後のFirefox Nightly(通常ウィンドウ)の状態です。
↓

■【修正後】Firefox Nightly(通常ウィンドウ)でのYouTubeの右サイドバーの状態

これが「本来の右サイドバーの横幅 ＆ 動画再生ウィンドウの横幅・余白」なはずです。

海外サイト等を色々調べてみると、この現象はFirefoxに限ったことではなく、Chrome・Edge・Firefox等、全てのブラウザで発生している現象のようです。

先に状況の結論を書きますと、この現象は

• YouTube側のA/Bテストに巻き込まれたブラウザ(正確にはブラウザで使用しているプロファイル)でのみ発生する

という可能性が高いです。

先に解決策

色々調べた中でわかりやすかったのは、Redditの右サイドバーのサイズに関するYoutubeの修正にある3つの解決策ですが、上記Redditのコードそのままコピペでは使えないので少し手を加えて書いておきます。

＆
私の解決策は上記3つとは異なります。

どれか1つだけ実施すればOKです。

ただし、私は解決方法その1その2その3は試していません。

解決方法その1：uBlock OriginのマイフィルターあるいはTampermonkey・Greasemonkey・Violentmonkey等

私は試していません。

■uBlock Originのマイフィルターの場合

www.youtube.com##+js(set, yt.config_.EXPERIMENT_FLAGS.kevlar_watch_secondary_max_width, 402)
www.youtube.com###related a.yt-lockup-view-model__content-image:style(width: 170px !important;)
www.youtube.com###related ytd-thumbnail:style(width: 170px !important;)

■Tampermonkey・Greasemonkey・Violentmonkey等の場合

// ==UserScript==
// @name         YouTube Sidebar Fix 402px
// @match        https://www.youtube.com/*
// @run-at       document-start
// ==/UserScript==

(function() {
    function setFlag() {
        if (window.yt?.config_?.EXPERIMENT_FLAGS) {
            Object.defineProperty(
                yt.config_.EXPERIMENT_FLAGS,
                "kevlar_watch_secondary_max_width",
                {
                    value: 402,
                    writable: true
                }
            );
            return true;
        }
        return false;
    }

    // すぐ試す
    if (!setFlag()) {
        // 読み込みが遅い場合に備えて待つ
        const timer = setInterval(() => {
            if (setFlag()) clearInterval(timer);
        }, 50);
    }

    // CSSを追加
    const style = document.createElement("style");
    style.textContent = `
#related a.yt-lockup-view-model__content-image,
#related ytd-thumbnail {
    width: 170px !important;
}
`;
    document.documentElement.appendChild(style);
})();

解決方法その2：uBlock OriginのマイフィルターあるいはTampermonkey・Greasemonkey・Violentmonkey等

私は試していません。

■uBlock Originのマイフィルターの場合

www.youtube.com##+js(set, yt.config_.EXPERIMENT_FLAGS.kevlar_watch_secondary_max_width, 410)
www.youtube.com###related a.yt-lockup-view-model__content-image:style(width: 170px !important;)
www.youtube.com###related ytd-thumbnail:style(width: 170px !important;)

■Tampermonkey・Greasemonkey・Violentmonkey等の場合

// ==UserScript==
// @name         YouTube Sidebar Fix 410px
// @match        https://www.youtube.com/*
// @run-at       document-start
// ==/UserScript==

(function() {
    function setFlag() {
        if (window.yt?.config_?.EXPERIMENT_FLAGS) {
            Object.defineProperty(
                yt.config_.EXPERIMENT_FLAGS,
                "kevlar_watch_secondary_max_width",
                {
                    value: 410,
                    writable: true
                }
            );
            return true;
        }
        return false;
    }

    if (!setFlag()) {
        const timer = setInterval(() => {
            if (setFlag()) clearInterval(timer);
        }, 50);
    }

    const style = document.createElement("style");
    style.textContent = `
#related a.yt-lockup-view-model__content-image,
#related ytd-thumbnail {
    width: 170px !important;
}
`;
    document.documentElement.appendChild(style);
})();

解決方法その3：userContent.css・Stylus等

私は試していません。

＆
このコードはwww.youtube.com限定の記述になっていません。
※誤爆する可能性は低いです、と思います。

userChrome.cssではありません、userContent.cssです。

#related a.yt-lockup-view-model__content-image,
#related ytd-thumbnail {width: 170px !important;}
#columns {--ywfsw: var(--ytd-watch-flexy-sidebar-width);}
#secondary.ytd-watch-flexy, ytd-watch-flexy:not([fullscreen], [theater]) #columns #secondary-inner {--ytd-watch-flexy-sidebar-width: min(var(--ywfsw), 420px);}

%appdata%\Mozilla\Firefox\Profiles\

■おすすめ■私の解決方法：userContent.css

上記Redditの「解決方法その3」はwww.youtube.com限定の記述にはなっていないのですが、「■おすすめ■私の解決方法」は「解決方法その3」を参考にして、www.youtube.com限定 ＆ 少し改良したコードになります。

「■おすすめ■私の解決方法」は、

• 誤爆の可能性が限りなく少ない
• もし将来YouTube側のA/Bテストの挙動が変わった場合でも破壊的な影響が発生せず、(コード修正する必要が生じても)最小限の修正で対応できる

となっています。

userChrome.cssではありません、userContent.cssです。

/* YouTube内の右のサイドバーの幅が狭くなる対策(暫定対策) */
@-moz-document domain("www.youtube.com") {
    /* サイドバー（プレイリスト・関連動画）の横幅を本来の420pxに広げる */
    #secondary.ytd-watch-flexy {
        width: 420px !important; 
        min-width: 420px !important;
        flex-basis: 420px !important;
    }

    /* 動画プレイヤー本体がサイドバーに被らないよう調整 */
    ytd-watch-flexy[flexy] #primary.ytd-watch-flexy {
        margin-right: 20px !important;
    }

    /* サムネイルの本来の横幅に戻す */ 
    #related a.yt-lockup-view-model__content-image, #related ytd-thumbnail {
        width: 170px !important;
    }
}

各解決方法の違い

繰り返しますが、
どれか1つの解決方法、かつ、どれか1つのアドオンあるいはファイルに追記すればOKです。
＆
Chrome・EdgeはuserContent.cssは使えないので、Stylusに記述します。
※FirefoxはuserContent.cssあるいはStylus、どちらかお好みのほうに記述します。

原因

単にYouTube側のA/Bテストに巻き込まれた可能性が高い

先に原因の結論を書きますと、お使いのブラウザ(正確にはブラウザのプロファイル)が単にYouTube側のA/Bテストに巻き込まれた可能性が高いです。

前述の「■おすすめ■私の解決方法」のコードを記述するまでは、

• YouTubeの右サイドバーが狭くなったのはFirefox Nightlyの通常ウィンドウだけ
• Firefox Nightlyのプライベートウィンドウでは狭くならずに本来の横幅
• Firefox通常版およびFirefox Developer Editionも狭くならずに本来の横幅

という状況でした。

私はuser.jsにて

//●YouTube対策
user_pref("general.useragent.override.youtube.com", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36");//●わざと最新のChromeではなく少し古いバージョンのユーザーエージェントに偽装している

と記述してあります。

今回私が実験した限りでは、一度YouTube側のA/Bテストに巻き込まれた後にユーザーエージェント偽装を解除しても「YouTubeの右サイドバーの横幅が狭くなる」件は解決しません。

※プロファイルをリセットすれば解決できるかもしれません。

プライベートウィンドウでも、user.jsの

user_pref("general.useragent.override.youtube.com", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36");//●わざと最新のChromeではなく少し古いバージョンに偽装している

は有効なままです。

色々調べた限りでは、

• Firefox Nightlyの通常ウィンドウでは、YouTubeの右サイドバーの幅が狭くなる

となるのは、ブラウザの種類に関係なく、単にYouTube側のA/Bテストに巻き込まれた可能性が高いです。

なぜFirefox Nightlyのプライベートウィンドウでは正常だったのか？

理由は YouTube の実験フラグ(A/B テスト)がプロファイルごとに違うからです。

■YouTube のA/Bテストの割り当てつまり実験フラグの割り当ては、

• Cookie
• (ブラウザの)LocalStorage
• IndexedDB
• Service Worker
• Googleアカウントのログイン状態
• YouTube(Google)のサーバー側のプロファイル情報(これが重要※2)

などを総合して決まります。

※2 YouTube側が管理している、バックエンド側のユーザープロファイル情報のことです。

■プライベートウィンドウは「完全に別ユーザー扱い」になります。

• Cookie → 共有しない
• LocalStorage → 共有しない
• IndexedDB → 共有しない
• Service Worker → 共有しない
• Googleアカウント → ログインしていない
• サーバー側の実験フラグ → 毎回リセットされる

• プライベートウィンドウは毎回、 “実験フラグが白紙の状態” で YouTube にアクセスする。

そのため、サイドバーが狭くなる実験にほぼ100％当選しない → 正常な幅になる、という仕組みです。

つまり、YouTubeの右サイドバーが狭くなる現象はFirefox・Chrome・Edge などブラウザを問わず、単にYouTubeのA/Bテストに選ばれてしまった“特定のブラウザプロファイル”だけで発生します。

言い換えると、Firefox・Chrome・Edge等の各ブラウザのユーザー全員がYouTube内の右サイドバーの幅が狭くなるわけではなく、YouTube側のA/Bテストに選ばれてしまった”ブラウザのプロファイルのみ”この現象になります。

• ブラウザの種類
• プラグインの有無
• uBlock Originの有無
• ユーザーエージェント偽装の有無

は基本的には関係ないです。

「YouTube側が管理している、バックエンド側のユーザープロファイル情報」によるA/Bテスト振り分けについて

YouTubeはA/Bテストを行う際に、ユーザーごとに

• どの実験グループに入れるか
• どのUI(デザイン)を表示するか
• どの機能を有効化するか

などをYouTube(Google)のサーバー側で決定しています。

この「サーバー側の保存されたユーザープロファイル(あなたのOSやブラウザプロファイルに基づくユーザー識別情報)」は、以下のような情報を含むと言われています。

• 過去の視聴履歴
• ログイン状態
• 地域
• デバイス情報
• 実験フラグの割り当て
• A/B テストのグループ情報

など。

YouTubeのA/Bテストは、ブラウザのCookieやLocalStorageを消しても元に戻らないことがあります。
その理由は、最終的な実験フラグの割り当ては、YouTube(Google)のサーバー側で管理されているからです。

つまり、ブラウザ側・OS側で何を削除・変更も、サーバー側で「このユーザーは実験グループA」と記録されていれば、また同じUI(デザイン)が配信されます。

※ブラウザのプロファイルをリセットすれば、このA/Bテストから解放される可能性はありますが100％確実というわけではありません。

今回の私の場合は、たまたまFirefox Nightly(通常ウィンドウ)のプロファイルだけがYouTube側のA/Bテストに巻き込まれた、ということになります。
＆
Firefox Nightlyの通常ウィンドウはYouTube側のA/Bテストに巻き込まれたまま、(A/Bテスト終了等でYouTube側から解放されない限り)「■おすすめ■私の解決方法」によってYouTubeの右サイドバー本来の横幅に上書き修正している状態です。

■【修正前】Firefox Nightly(通常ウィンドウ)でのYouTubeの右サイドバーの状態

■【修正後】Firefox Nightly(通常ウィンドウ)でのYouTubeの右サイドバーの状態

これが「本来の右サイドバーの横幅 ＆ 動画再生ウィンドウの横幅・余白」なはずです。

まあ現状で上記のようになっているので問題ありません、というか、普段Firefox Nightlyはほとんど使ってないです＞＜

YouTubeの右サイドバーの横幅が狭くなる原因と対策の件は以上です。