【Stylebot】YouTubeの余計な要素を非表示にするCSS

​2022年2月1日​​YouTube

Stylebotのアイコン

この記事では、YouTubeの色々な部分を非表示にして、マウスオーバーした時だけ表示するCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

【Stylebot】YouTubeの余計な要素を非表示にするCSS

YouTubeのいたるところの要素を、透明にして見えなくするCSSです。マウスを乗せることで表示します。具体的には、サイドバーのおすすめ動画・関連動画、メイン動画、タイトル、チャンネル名（概要欄）、コメント欄を非表示にします。

CSSなので、自分が非表示にしたい項目だけ適用できます。例えば、「メイン動画は普通に表示したい！」って場合でも、自由に対応できます。マウスを乗せたときは普通に表示するので、見たくなった時はいつでも見れます。マウスオーバーするだけです。

ワンクリックでオンオフできます。

以下のような状況の時に便利です。

  • 音だけを堪能したい！
  • 動画に集中したいから、サイドバーのおすすめ動画やコメント欄は見えないほうがいい！
  • 席を立っている時に、うっかり他の人にYouTube 画面見られるの嫌だ！
  • 余計な要素あったら永遠と時間食っちゃう！

上記のような状況が実際にあるかどうかは不明です。使いたい人だけ、使ってみましょう。

「CSSは少し難しい！」という方は、先人たちが公開している拡張機能を利用してみましょう。CSSと比べると自由度が低いですが、動画をオフにして、音だけを楽しむといったことができます。Chrome拡張機能なら「Music Mode」、Firefoxなら「Youtube Audio」がおすすめです。

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

Firefoxをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。

Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。

「Firefoxへ追加」をクリックします。

Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。こちらは、ウェブパネル内にもCSSを適用できます。

CSS

書き込むコードは、以下になっています。

/*カスタムプロパティ*/
:root {
  --toumei: 0;
  --hutoumei: 1;
  --anime: 0.4s;
}

/*------------------------------
通常時の挙動
-------------------------------*/
/*サイドバー*/
#secondary,
/*メイン動画*/
.video-stream.html5-main-video,
/*タイトル*/
.title.style-scope.ytd-video-primary-info-renderer,
/*チャンネル名、概要欄*/
.style-scope ytd-video-secondary-info-renderer,
/*コメント欄*/
ytd-comments {
  opacity: var(--toumei);
  transition-duration: var(--anime);
}

/*------------------------------
ホバー時の挙動
-------------------------------*/
/*サイドバー*/
#secondary:hover,
/*メイン動画*/
.video-stream.html5-main-video:hover,
/*タイトル*/
.title.style-scope.ytd-video-primary-info-renderer:hover,
/*チャンネル名、概要欄*/
.style-scope ytd-video-secondary-info-renderer:hover,
/*コメント欄*/
ytd-comments:hover {
  opacity: var(--hutoumei);
}

以下画像のようになればOKです。（下記画像は、Stylusです）

スタイルを編集　YouTubeの不要な項目を非表示にしてマウスオーバーで表示するCSS

他の「YouTubeカスタマイズCSS」を使っている場合は、新規にスタイルを作成して、「YouTube非表示CSS」みたいな感じにするのがいいかなぁと思います。

スタイルを編集　名前を変更

別で作成することで、ずっと使い続けるスタイル、状況に応じてオンオフするスタイル…といったように使い分けできます。

Stylus　YouTube非表示CSS
合わせて読みたい

余談ですが、YouTubeのデザインを角丸フローティングにする記事も書いています。気になった方は、参考にしてみてください。

YouTubeを角丸フローティングデザインにしてみた画像

適用すると、下記画像のようにYouTubeのいたるところが真っ暗になります。

YouTubeのありとあらゆる要素が透明（真っ黒）になる

マウスオーバーでゆっくり表示します。実際に使ってみた動画を貼っておきます。

ライトモードを利用している方でも、同じコードが使えます。

本記事で紹介しているCSSはライトモードでも利用可能

全部使う必要はなし

コードを全部使う必要はありません。自分が使いたい項目だけを選んでみましょう。

例えば、「メイン動画、チャンネル名は普通に表示して、サイドバー、コメント欄はマウスオーバーで表示するようにしたい！」という場合は、下記CSSになります。

/*カスタムプロパティ*/
:root {
  --toumei: 0;
  --hutoumei: 1;
  --anime: 0.4s;
}

/*------------------------------
通常時の挙動
-------------------------------*/
/*サイドバー*/
#secondary,
/*タイトル*/
.title.style-scope.ytd-video-primary-info-renderer,
/*コメント欄*/
ytd-comments {
  opacity: var(--toumei);
  transition-duration: var(--anime);
}

/*------------------------------
ホバー時の挙動
-------------------------------*/
/*サイドバー*/
#secondary:hover,
/*タイトル*/
.title.style-scope.ytd-video-primary-info-renderer:hover,
/*コメント欄*/
ytd-comments:hover {
  opacity: var(--hutoumei);
}

適用した部分だけ非表示になって、他はマウスを乗せていなくても表示されます。

全部使う必要はない　タイトル、メイン動画は表示してみた画像

「/*〇〇〇*/」と、その下にある行を取り除くって感じです。最初の4行（カスタムプロパティ）に関しては、削除しないようにしてください。必要なコードです。

アニメーションについて

表示・非表示切り替えにフェードのアニメーションを適用しています。このアニメーションの速度は、カスタマイズできます。

コードの一番最初にある「カスタムプロパティ」の中にある以下の部分が、アニメーション速度を調整しています。デフォルトでは「0.4秒」になっています。

  --anime: 0.4s;

例えば、1秒かけてゆっくり偏移してほしい場合は、以下のようにします。

/*カスタムプロパティ*/
:root {
  --toumei: 0;
  --hutoumei: 1;
  --anime: 1s;
}

これで、アニメーション速度が1秒に変更されます。

アニメーションそもそも不要な方へ

「偏移アニメーションが不要！瞬時に表示切り替えしてほしい！」という方は、以下のCSSを使ってみてください。

/*カスタムプロパティ*/
:root {
  --toumei: 0;
  --hutoumei: 1;
}

/*------------------------------
通常時の挙動
-------------------------------*/
/*サイドバー*/
#secondary,
/*メイン動画*/
.video-stream.html5-main-video,
/*タイトル*/
.title.style-scope.ytd-video-primary-info-renderer,
/*チャンネル名、概要欄*/
.style-scope ytd-video-secondary-info-renderer,
/*コメント欄*/
ytd-comments {
  opacity: var(--toumei);
}

/*------------------------------
ホバー時の挙動
-------------------------------*/
/*サイドバー*/
#secondary:hover,
/*メイン動画*/
.video-stream.html5-main-video:hover,
/*タイトル*/
.title.style-scope.ytd-video-primary-info-renderer:hover,
/*チャンネル名、概要欄*/
.style-scope ytd-video-secondary-info-renderer:hover,
/*コメント欄*/
ytd-comments:hover {
  opacity: var(--hutoumei);
}

カスタムプロパティの「–anime: 0.4s;」と、通常時の挙動の「transition-duration: var(–anime);」を削除しただけで、アニメーションが無効になります。

「マウスオーバーで表示」を無効にする

「マウスを乗せても表示したくない！」って方は、以下のCSSを使ってみてください。ホバー時の挙動を全部削除しているので、マウスを乗せても表示されなくなります。

/*------------------------------
YouTubeの余計な要素を非表示にするCSS
-------------------------------*/
/*サイドバー*/
#secondary,
/*メイン動画*/
.video-stream.html5-main-video,
/*タイトル*/
.title.style-scope.ytd-video-primary-info-renderer,
/*チャンネル名、概要欄*/
.style-scope ytd-video-secondary-info-renderer,
/*コメント欄*/
ytd-comments {
  opacity: 0;
}

需要があるかは不明です。

【追記】Firefoxで表示されるサムネイル削除

追記日：2022年4月3日

Firefoxベースのブラウザの場合、動画をクリックすると、その動画のサムネイルがメイン画面に表示されるようになっています。ChromeやVivaldiだと、すぐに再生されるのになんでなんですかね。

Firefoxベースのブラウザだと、YouTubeの最初にサムネイルが表示される

Firefoxを使っている方のために、サムネイルを非表示にするコードを追記しておきます。

/*メイン動画のサムネイル*/
.ytp-cued-thumbnail-overlay-image {
	opacity: 0;
}

サムネイルが真っ黒になって表示されなくなります。

FirefoxのYouTubeで表示されるサムネイルが非表示になる

マウスオーバーで表示させたい場合は、上記コードではなく、以下のコードになります。

/*メイン動画のサムネイル*/
/*通常時は非表示*/
.ytp-cued-thumbnail-overlay-image {
  opacity: 0;
  transition-duration: .3s;
}
/*ホバー時に表示*/
.ytp-cued-thumbnail-overlay-image:hover {
  opacity: 1;
}

まとめ

以上、YouTubeの余計な要素を非表示にして、マウスオーバーで表示するCSSについてでした。

サイドバーにおすすめ動画や関連動画が表示されていると、延々と見ちゃって時間を食っちゃうんですよね。集中したい時は、思い切って全部非表示（透明）にすると、案外はかどるかもしれません。

​2022年2月1日​​YouTube