【YouTube】動画内のシアター、ミニプレーヤーなどの非表示CSS
PCウェブサイト版「YouTube」で動画プレーヤー内にマウスホバーすると、進行状況バーと各種ボタンが表示されます。
僕は「Enhancer for YouTube」拡張機能を使って、フィルターやスクリーンショット撮影ボタンを新しく設置しています。拡張機能で追加したボタンはいつでもオンオフできるので全然いいんですが、元々用意されているボタンで使っていないのは消せなくて邪魔です。
具体的にはミニプレーヤー、シアターモード、テレビで再生などのボタンです。これらのボタンは恐らく標準の設定からは消せません。消せないですよね…?消せたらごめんなさい
CSSを使うことで、不要なボタンをピンポイントで消せます。見た目上消しているだけなので、いつでもオンオフできます。自身の環境上で誰にも迷惑をかけません。
本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。
インストール方法
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。
「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
YouTubeの動画プレーヤー内下部にあるボタンを消すCSS
「YouTube」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面が表示されます。
以下のコードを書き込みます。全部書き込む必要はありません。自身が消したいボタンのCSSだけコピーして貼り付けます。
/*【動画プレーヤー内のボタン】再生・一時停止非表示*/
#movie_player .ytp-left-controls button.ytp-play-button[aria-label^="再生"] {
display: none !important;
}
/*【動画プレーヤー内のボタン】次へ非表示*/
#movie_player .ytp-left-controls a.ytp-next-button[aria-label^="次へ"] {
display: none !important;
}
/*【動画プレーヤー内のボタン】字幕非表示*/
#movie_player .ytp-right-controls button.ytp-subtitles-button {
display: none !important;
}
/*【動画プレーヤー内のボタン】ピクチャーインピクチャー非表示*/
#movie_player .ytp-right-controls button.ytp-pip-button {
display: none !important;
}
/*【動画プレーヤー内のボタン】ミニプレーヤー非表示*/
#movie_player .ytp-right-controls button.ytp-miniplayer-button {
display: none !important;
}
/*【動画プレーヤー内のボタン】シアターモード非表示*/
#movie_player .ytp-right-controls button.ytp-size-button {
display: none !important;
}
/*【動画プレーヤー内のボタン】テレビで再生非表示*/
#movie_player .ytp-right-controls button.ytp-remote-button {
display: none !important;
}
/*【動画プレーヤー内のボタン】フルスクリーン非表示*/
#movie_player .ytp-right-controls button.ytp-fullscreen-button {
display: none !important;
}
/*【動画プレーヤー内のボタン】自動再生非表示*/
#movie_player .ytp-right-controls button[aria-label^="自動再生"] {
display: none !important;
}
本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
僕の場合、ミニプレーヤー、シアターモード、テレビで再生ボタンが不要なので、3つのCSSを書き込みます。下記画像のように書き込んで、右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト(例:www.youtube.com
)がオンになっていることを確認します。オンになっている間は有効になっているということです。
動画プレーヤー画面を開きます。(ナポリタン寿司のサンプル動画)書き込んだボタンが非表示になっています。空白はできず、そのまま右に詰めてくれます。
全部のCSSを書き込むと、下記画像のようになります。綺麗になります。人によっては、フルスクリーン(全画面)はショートカットキーを使うからボタンとしては不要…という場合もあるかもしれませんね。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.youtube.com
」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
動画下の低評価、共有、THANKS、クリップなどのボタンを非表示にしたい場合
以下の記事を参考にしてみてください。同じくCSSを利用します。
YouTubeに動画をアップロードしている方は、以下の記事も役立つかもしれません。低評価が押されるのは防げませんが、低評価が目に入るのは防げます。
僕は低評価をはじめとした不要なボタンを消して、綺麗にしています。コメント欄も閉鎖しているので、ストレスなく動画投稿できています。
プレーヤー内の不要なボタンを映さずスクリーンショット撮影する方法
「Google Chrome」ブラウザの場合、2023年8月おわり?9月はじめ?頃におこなわれたバージョン116以降、動画の右クリックから、不要なボタンを映さず、動画のフレームだけキャプチャーできる機能を利用できます。詳しくは、下記記事を参考にしてみてください。
右クリックからアクセスするのが手間…という場合は、冒頭でも紹介した「Enhancer for YouTube」拡張機能や、類似拡張機能を使うといいかなと思います。
感想
以上、PCウェブサイト版「YouTube」の動画プレーヤー内下部にある次へ、自動再生、字幕、ピクチャーインピクチャー、ミニプレーヤー、シアターモード、テレビで再生、フルスクリーンなどのボタンを個別に非表示するCSSでした。
YouTube×CSSの記事は、多数書いているので、気になった方は、参考にしてみてください。更新日が古い記事に関しては、もうCSSが使えなくなっている可能性もあります。