logo Ribbit's works

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

#note
にメンテナンス済み
記事のトップ画像

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

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

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

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

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

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

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

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

Stylus の設定

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

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

youtube-stylus

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

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

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

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

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

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

適当な動画を開いて確認してみてください。