広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【YouTube】動画上の右クリックにある不要な項目を非表示にするCSS

YouTube

「YouTube」のアイコン画像

この記事では、PCウェブサイト版「YouTube」の動画プレーヤー上で右クリックした時に表示されるループ再生、ミニプレーヤー、デバッグ情報をコピーなどの不要な項目を非表示にするCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

【YouTube】動画上の右クリックにある不要な項目を非表示にするCSS

2025年のPC版「YouTube」の仕様変更により、動画プレーヤー内にあるピクチャーインピクチャーボタンが非表示になり、右クリックメニューに「ミニプレーヤー」が追加されました。

PC版「YouTube」の動画上で右クリックした画像

アカウントごとで実装時期は別々なようで、早い人は8月、僕は10月にそうなりました。

この時、ふと「ミニプレーヤー使ってないのに右クリックに表示されるの邪魔じゃね?動画のURLをコピーだけで十分じゃね?」って思いました。使っていない項目が結構あります。

  • ループ再生
  • ミニプレーヤー
  • 動画のURLをコピー
  • 現時点の動画のURLをコピー
  • 埋め込みコードをコピー
  • デバッグ情報をコピー
  • 再生に関する問題をトラブルシューティングする
  • 詳細統計情報

CSSを使うことで自身の環境上で非表示にできます。他人には一切影響しません。見た目だけの変更です。

拡張機能を導入できるPCブラウザ専用で、スマホやタブレットのアプリ版ではできません。

前提

Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。

動画上右クリックメニューから不要な項目を消すCSS

スタイルシートを開く

YouTube」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

「Stylebot」拡張機能のスクリーンショット1

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のCSSになります。全てを書き込む必要はありません。自分が消したい項目のCSSのみ書き込みます。

CSS
/*【動画上の右クリック】ループ再生*/
.ytp-panel-menu>.ytp-menuitem:has([d^="M7 7H17V10L21"]) {
    display: none !important;
}

/*【動画上の右クリック】ミニプレーヤー*/
.ytp-panel-menu>.ytp-menuitem:has([d^="M25,17 L17,17 L17,23"]) {
    display: none !important;
}

/*【動画上の右クリック】埋め込みコードをコピー*/
.ytp-panel-menu>.ytp-menuitem:has([d^="M14.1 24.9L7.2 18.0l6.9-6"]) {
    display: none !important;
}

/*【動画上の右クリック】デバッグ情報をコピー*/
.ytp-panel-menu>.ytp-menuitem:has([d^="M20 10V8H17.19C16.74 7.22"]) {
    display: none !important;
}

/*【動画上の右クリック】再生に関する問題をトラブルシューティングする*/
.ytp-panel-menu>.ytp-menuitem[href*="support.google.com/youtube/?p=report_playback"] {
    display: none !important;
}

/*【動画上の右クリック】詳細統計情報*/
.ytp-panel-menu>.ytp-menuitem:has([d^="M22 34h4V22h-4v12zm2-30"]) {
    display: none !important;
}

「動画のURLをコピー」と「現時点の動画のURLをコピー」は僕自身が使っているってのと、少しCSS作成がめんどくさかったので紹介していません。

技術的な話をすると、右クリックメニューの各項目のアイコン画像を読み取って判断しているので、YouTubeの仕様変更でアイコン画像が変わってしまうとたちまち使えなくなります。

注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

「Stylebot」拡張機能のスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:www.youtube.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。

消えたか確認する

動画再生ページ(サンプル)を開いて、動画プレーヤー上で右クリックします。

CSSを書き込んだ項目が非表示になってスッキリします。

PC版「YouTube」の動画上右クリックメニューをCSSで綺麗にした画像

一時的に無効化したい場合は、拡張機能メニュー内にある「Stylebot」アイコンを左クリック→「www.youtube.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。

感想

以上、PCウェブサイト版「YouTube」の動画プレーヤー上で右クリックした時に表示されるループ再生、ミニプレーヤー、デバッグ情報をコピーなどの不要な項目を非表示にするCSSでした。

少し前に全画面時に下スクロールができなくなる仕様変更もされていて、もしかしたらYouTubeは動画を集中して見てほしい方針に切り替えたのかもしれません。

「フルスクリーンの時は下スクロールで他のコンテンツ見ないで」、「ミニプレーヤーはなるべく使わないで動画に集中して」みたいな意図なのかなぁと。

その意図の裏には、より多くの広告を見てほしいって願いも込められているのかもしれません。完全に僕の妄想です。

余談ですが、動画上での二回右クリックで動画のスクリーンショットを撮影できます。

YouTube

Posted by ナポリタン寿司