Ribbit.work

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

note

last modified date2021-8-12

publish date2021-8-11

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;
}

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

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

この記事をシェア

この記事を読んだ方におすすめの記事

もう損しない!現役会計事務所内SEが教える経理向けPCの選び方とスペックの目安
2021-8-4

もう損しない!現役会計事務所内SEが教える経理向けPCの選び方とスペックの目安

note

最新の記事

kuromoji.jsで形態素解析
2021-12-4

kuromoji.jsで形態素解析

TypeScriptJavaScript
レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】
2021-12-4

レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】

JavaScriptKintone
レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】
2021-11-29

レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】

JavaScriptKintone
スライダーを使って数値を設定できるKintoneプラグイン【無料公開】
2021-11-26

スライダーを使って数値を設定できるKintoneプラグイン【無料公開】

KintoneJavaScriptTypeScript