【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;
}
button.ytp-chapter-title.ytp-button {
  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の仕様変更でPCでも使えなくなる可能性があります。それでも良いよ！という方はお使いください。

Stylebotをインストール

１．chromeウェブストアで上記画像のStylebotを探し、「Chromeに追加」を押します。

２．「～自分の全データの読み取りと変更」と出ますが、「拡張機能を追加」を押します。

３．英語のページに飛ばされますが、閉じて大丈夫です。

４．PC画面の右上に拡張機能ボタンが追加されます。固定ボタンを押してショートカットを作ります。

CSSコードを入力

YouTubeのページ内で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のON・OFFスイッチを使う。
入力したコードを一部（または全て）消す。

解説します↓

StylebotのON・OFFスイッチ

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

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

紹介したコードは、それぞれ「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;
}