Youtubeのシアターモードを画面ギリギリまで大きくする

Youtube のシアターモード、みなさんは利用していますか？

フルスクリーンは嫌、でも画面はギリギリまで大きく表示したい。というわがままな要望に応えてくれるのが、シアターモードです。

ただ、動画タイトルを表示させるためなのか、標準では横幅は上限まで広がっても、縦幅が上限まで広がらないような設定となっています。

今回はこの部分を改善して、シアターモード時は画面上部のヘッダーと動画のみとなるように設定する方法をご紹介致します。 動作確認しているブラウザは Google Chrome と Firefox です。

YouTube のページ構造は予告なく変更されます。CSS が効かなくなった場合は、ブラウザの開発者ツールでシアターモードのプレーヤー領域（#player-theater-container）のセレクターが残っているか確認してください。

「Stylus」プラグインをインストール

まず、変更を適用するためのプラグインをインストールします。

Chrome をお使いの方はこちらから

Firefox をお使いの方はこちらから

Stylus の設定

Stylus のインストールが終わったら、画面右上に Stylus のアイコンが追加されます。

その上で、Youtube にアクセスし、アイコンをクリックしてみてください。

すると、このような画面が表示されると思います。

そこで、www.youtube.comが選択された状態でクリックしてください。

新しいタブが開き、エディタが表示されます。

そこに、以下のコードをコピーして貼り付けてください。

#player-theater-container {
  max-height: calc(100vh - 56px) !important;
}

保存ボタンをクリックすれば完了です。

適当な動画を開き、シアターモード（プレーヤー右下のボタン、またはキーボードの t）に切り替えて確認してください。

元に戻したい場合は、Stylus のアイコンから該当スタイルを無効化または削除します。