YouTubeで全画面表示を解除するとプレイリストだけが勝手に折りたたまれる問題の解決策

YouTubeではプレイリスト再生中に全画面表示にするとプレイリストはいったん非表示になります。

(主にFirefoxの場合)全画面表示を解除して通常ウィンドウに戻ると、右サイドバーのプレイリストだけが勝手に折りたたまれることがあります。
これだけならまだよいのですが、プレイリストが折りたたまれた状態で次のプレイリスト動画に自動遷移すると、プレイリスト以外の動画が再生されることがあります。

調べた限りでは、この現象は

• 主にFirefoxで発生しやすい※高確率で発生する
• ChromeやEdgeではほぼ発生しない※絶対発生しないわけではなく、YouTube側のUI変更で将来発生する可能性はある

ということです。

この記事では、YouTubeの不具合が原因で主にFirefoxで発生する

• プレイリスト以外の動画が再生される問題

の解決策を解説します。

原因

YouTubeはSPA（Single Page Application）として動作しており、動画の切り替えや全画面表示の解除時に内部DOMを部分的に再生成します。

この再描画処理はブラウザごとに挙動が異なるようで、特にFirefoxではChromium系ブラウザとはDOM更新のタイミングが異なるため、Firefoxでは属性の付与と削除の順序がずれやすく、結果としてこの現象が発生しやすいと考えられます。
つまりFirefoxでは、collapsedが付与されたタイミングと再描画のタイミングが噛み合わず、属性が残ったままUIが閉じてしまうケースがあるようです。

一方Chrome系では、collapsed属性が付いてもすぐに内部処理で除去されるため、UIが閉じたまま残ることはほぼありません。

さらに、YouTubeの内部コードはGoogle製であるため、YouTubeはChromeを基準に最適化されています。
Chromeでは問題が起きないよう調整されている一方、Firefoxは副作用的に不具合が発生することがあり、当記事にある「プレイリスト折りたたみ問題」もその一例です。

以上の理由から、

ということになります。

【解決策その1】uBlock Originで解決する

uBlock Originのマイフィルターに以下のコードを追加

!■YouTubeの不具合(通常ウィンドウサイズ → フルスクリーン → 通常ウィンドウサイズで、
!プレイリストが勝手に閉じる、というYouTubeの不具合が発端で、
!プレイリストの次の曲に遷移する際にたまにプレイリスト以外の別の動画に遷移する対策
www.youtube.com##+js(ra, collapsed, ytd-playlist-panel-renderer[collapsed], stay)

【解決策その2】Tampermonkeyで解決する

Tampermonkeyにて、以下のユーザースクリプトを追加します。

// ==UserScript==
// @name         YouTube Playlist Auto-Uncollapse (ra equivalent)
// @namespace    https://tampermonkey.net/
// @version      1.1
// @description  Remove "collapsed" attribute from ytd-playlist-panel-renderer (equivalent to uBO's ra scriptlet with "stay")
// @match        https://www.youtube.com/*
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    const watched = new WeakSet();

    const removeCollapsed = (el) => {
        if (el.hasAttribute("collapsed")) {
            el.removeAttribute("collapsed");
        }
    };

    const attachObserver = (el) => {
        if (watched.has(el)) return;
        watched.add(el);

        // 初期状態の collapsed を除去
        removeCollapsed(el);

        // collapsed が付いた瞬間に削除する
        const mo = new MutationObserver(() => removeCollapsed(el));
        mo.observe(el, { attributes: true, attributeFilter: ["collapsed"] });
    };

    // YouTube は SPA なので、要素が入れ替わるたびに監視し直す必要がある
    const rootObserver = new MutationObserver(() => {
        document.querySelectorAll("ytd-playlist-panel-renderer").forEach(attachObserver);
    });

    rootObserver.observe(document.documentElement, { childList: true, subtree: true });
})();

YouTubeで全画面表示を解除するとプレイリストだけが勝手に折りたたまれる問題の解決策は以上です。

記事の冒頭にも書きましたが、【解決策その1】【解決策その2】どちらのやり方でもデメリットが1つあるというか、

• 自分でプレイリストの右側の「X」ボタンをクリックしてプレイリストを閉じても、すぐにプレイリストが開いてしまう

のでご注意ください。