【YouTube】動画再生画面の邪魔なボタンを消すCSS（拡張機能「Stylebot」）

スマホで読むときは、横持ちがおすすめです。

最速手順（パソコンのみ）

YouTubeのページ内で、Chromeクローム拡張機能「Stylebotスタイルボット」（無料）を開く。
「Stylebotを開く」➡「コード」を押して真っ白なページを開く。
下のCSSコードをコピペして、再生画面（動画プレーヤー内）に反映されれば完了。

コピーボタン↓

/*【再生画面】再生、次へ、ミュート（・音量）、自動再生、字幕、ミニプレーヤー、シアターモード、テレビで再生、全画面*/
#movie_player .ytp-left-controls button.ytp-play-button[aria-label^="再生"],[aria-label^="次へ"],[aria-label^="ミュート"],[aria-label^="音量"],[aria-label^="自動再生"],[aria-label^="字幕"],[aria-label^="ミニプレーヤー"],[aria-label^="シアター モード"],[aria-label^="テレビで再生"],[aria-label^="全画面"] {
  display: none;
}


/*【再生画面】全画面時のタイトル、後で見る・共有、スクロールして詳細を表示*/
a.ytp-title-link.yt-uix-sessionlink.ytp-title-fullerscreen-link {
  display: none;
}
div.ytp-share-icon, div.ytp-watch-later-icon {
  display: none;
}
button.ytp-fullerscreen-edu-button.ytp-button {
  display: none;
}

ここからStylebotの使い方を解説します。

PC（パソコン）ブラウザ版「YouTube」動画再生画面（動画プレーヤー内）のボタンを消すCSSコードを紹介します。

自分で考えたコードをウェブサイトに適用できるChromeクローム拡張機能「Stylebotスタイルボット」（無料）を使います。

スマホやタブレットでは使えません。

紹介するコードは、YouTubeの仕様変更で使えなくなる可能性があります。その点を理解のうえ、お使いください。

本記事のコードで以下の動画再生画面のボタンを消します。全画面で動画を見るときに使えるコードも紹介します。

【再生画面】再生、次へ、ミュート（・音量）、自動再生、字幕、ミニプレーヤー、シアターモード、テレビで再生、全画面
【全画面】タイトル、後で見る・共有、スクロールして詳細を表示

※ミュート、全画面ボタンが残り続ける場合がありますが、マウスカーソルをボタンに合わせると消えます。

Stylebotのインストール方法

Chromeウェブストアで下記画像のStylebotを探し、「Chromeに追加」を押してインストールします。

「自分の全データの読み取りと変更」などと聞かれますが、「拡張機能を追加」を押します。

突然「Stylebot Help」などと英語のページに飛ばされますが、このページは閉じて大丈夫です。

右上に拡張機能ボタンが追加されればOKです。固定ボタンを押してショートカットをつくります。

CSSコードの入力方法

Stylebotを開き、①「Stylebotを開く」②「コード」を押して、③真っ白なページが出たら、下にあるCSSコードを入力します。

コピーボタン↓

/*【再生画面】再生、次へ、ミュート（・音量）、自動再生、字幕、ミニプレーヤー、シアターモード、テレビで再生、全画面*/
#movie_player .ytp-left-controls button.ytp-play-button[aria-label^="再生"],[aria-label^="次へ"],[aria-label^="ミュート"],[aria-label^="音量"],[aria-label^="自動再生"],[aria-label^="字幕"],[aria-label^="ミニプレーヤー"],[aria-label^="シアター モード"],[aria-label^="テレビで再生"],[aria-label^="全画面"] {
  display: none;
}


/*【再生画面】全画面時のタイトル、後で見る・共有、スクロールして詳細を表示*/
a.ytp-title-link.yt-uix-sessionlink.ytp-title-fullerscreen-link {
  display: none;
}
div.ytp-share-icon, div.ytp-watch-later-icon {
  display: none;
}
button.ytp-fullerscreen-edu-button.ytp-button {
  display: none;
}

CSSコードを無効にする

Stylebot内のオンオフスイッチを使う。
入力したコード一部消す（または全文）。

解説します↓

Stylebotのオンオフスイッチ

YouTubeのページ内でStylebotを開き、YouTubeのサイト名（www.youtube.com）の左側にあるスイッチをオフにすると、入力したコードが無効化されます。

入力したコードを一部（または全文）消す

紹介したコードは、それぞれ「display: none;」という英文が入っています。語尾の「e」だけ消して、「display: non;」にすると無効化されます。

コードの一部を消す方法は、「無効化したい、でもコードは残したい」人におすすめです。

動画再生画面のボタンをより細かく表示・非表示にする

紹介したコードの中に、「[aria-label=”～”]」という部分がある（「～」は元に戻したいボタンの名前）。その部分を消すと、目的のボタンが元通り表示される。

全画面のときの「タイトル」は上から１つ目のコードを、「後で見る・共有」は２つ目のコードを、「スクロールして詳細を表示」は３つ目のコードを消せば、元通り表示される。

解説します↓

紹介したコードは、再生画面の複数のボタンをまとめて消せるようにしています。以下の通りです。

【再生画面】再生、次へ、ミュート（・音量）、自動再生、字幕、ミニプレーヤー、シアターモード、テレビで再生、全画面
【全画面】タイトル、後で見る・共有、スクロールして詳細を表示

例えば、

紹介されたコードだと「全画面」ボタンが消えちゃう！他のボタンは別にいいけど、「全画面」ボタンだけは消えたら困る！

この場合、コードの中の「,[aria-label^=”全画面”]」を消します。

次に、全画面用のコードは、「タイトル」「後で見る・共有」「スクロールして詳細を表示」を別々に分けると、以下のようになります。

/*【再生画面】全画面時のタイトル*/
a.ytp-title-link.yt-uix-sessionlink.ytp-title-fullerscreen-link {
  display: none;
}

/*【再生画面】全画面時の後で見る・共有*/
div.ytp-share-icon, div.ytp-watch-later-icon {
  display: none;
}

/*【再生画面】全画面時のスクロールして詳細を表示*/
button.ytp-fullerscreen-edu-button.ytp-button {
  display: none;
}

上と同じ部分のコードを消せば、対応する項目を元通り表示できます。

説明むずい、という方は、すでに全画面用のコードを入力しているなら消して、上から必要なコードだけコピペすることをおすすめします。