【YouTube】左上の「プロモーションを含みます」非表示CSS

2023年10月15日2024年2月25日YouTube

この記事では、PCウェブサイト版「YouTube」の動画プレーヤー内左上に数秒だけ表示される「プロモーションを含みます」を最初から非表示にするCSSを書きます。

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

PCブラウザでYouTubeを見ている時、プレーヤー内左上に「プロモーションを含みます」と表示される時があります。これは投稿者が設定できるオプションで、「この動画は、企業から依頼されて作成した案件動画だよ～」と示す機能です。

視聴者は、通常の動画と変わらずに見ることができます。これが表示されたら、追加料金がかかる…などのデメリットは一切ありません。むしろ案件されたことが分かる目印なので、ステルスマーケティングかどうか判断できるメリット機能だと思います。

たまに、企業から依頼されたにも関わらず、「プロモーションを含みます」を付けず、概要欄にもそのような旨を記載しない動画投稿者がいます。ステマです。

個人的には、自分が企業から依頼された動画を投稿する時、「ステマじゃないよ！案件動画だよ！」とアピールするのに使えますし、見る時も、「あ、これ依頼された動画なんだ」と、素早く判断できるので、便利だと思います。

ずっと表示されるわけではなく、一定時間経過後、自動的に隠れるので、そこまで邪魔でもない気がしますが、人によっては、下の動画が見えなくて、邪魔と思うかもしれません。本記事では、CSSを使って消してみます。合わせて、目立たなくさせるCSSも書きます。

本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。拡張機能を利用できるブラウザアプリ（例：Kiwi Browser）などを使えば、もしかしたらできるかもしれません。

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕は、メインでは「Stylus」を使っています。

Stylebot

ウェブの外観を瞬時に変更

 https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

 https://www.naporitansushi.com/stylebot/

YouTubeの「プロモーションを含みます」を消すCSS

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

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

/*「プロモーションを含みます」非表示*/
a.ytp-paid-content-overlay-link:has([d^="M6 9H5V5V4H6H19V5H6"]) {
    display: none !important
}

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

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

「プロモーションを含みます」が表示される動画を開きます。試しに、僕の動画で見てみます。CSS導入前は、再生から10秒程度表示されていましたが、CSS導入後は最初から表示されなくなります。

消したからといって、案件動画がなくなるわけではありません。自分が消しているのに、投稿者に「おい！これ案件動画やないかい！ステマか！？」と文句を言うのはやめましょう。迷惑です。案件動画と通常動画を見分けられなくなることを頭に入れておきましょう。

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

非表示ではなく、小さく、薄くして目立たなくするCSS

「ポップアップがあると、下の映像が見えないから邪魔！だけど、完全に消すと案件かどうかの判断が難しくなる！」という方は、小さくするなどの対策をしてみるといいかなと思います。

試しに、以下のCSSを作成してみました。非表示にするCSSと併用しても意味がないので、どちらかを利用しましょう。

/*「プロモーションを含みます」カスタマイズ*/
/*背景透明化、余白具合*/
a.ytp-paid-content-overlay-link:has([d^="M6 9H5V5V4H6H19V5H6"]) {
    background-color: transparent;
    padding: 0 !important;

    /*左側のアイコン非表示*/
    &>.ytp-paid-content-overlay-icon {
        display: none !important;
    }

    /*角丸具合、背景*/
    &>.ytp-paid-content-overlay-text {
        background-color: rgba(0,0,0,.3) !important;
        border-radius: 0 10px 10px 0 !important;
    }
}

「background-color: transparent;」で一旦背景を透明化しています。「padding: 0」で周りの余白を除去して、より小さくしています。

「左側のアイコン非表示」で、左側にある「」アイコンを消しています。

「角丸具合、背景」の「background-color: rgba(0,0,0,.3)」で、再びテキストの下に、背景色を設定しています。「背景色はいらない！完全に透明でいい！」という方は、この行を書かないようにします。

「rgba」の4番目の数字で、背景の透明具合を調整できます。0～1の間で指定できます。「0」が完全な透明、「1」が透明にしません。上記サンプルCSSは「.3」で、結構透明にしますよ～という意味です。もっと透明にしたい場合は、「.1」とか「.2」とか、小さい数字を指定します。「0.1」という表記でも、0を省略しない「.1」でもどちらでもOKです。

「border-radius」は、再び背景を付けている時の角丸具合です。左側に水色の枠線（border）があったので、右側だけ角丸にしています。

「プロモーションを含みます」が小さくなり、背景の透明度も増します。下の映像が見やすくなると思います。

感想

以上、PCウェブサイト版「YouTube」の動画プレーヤー内左上に数秒だけ表示される「プロモーションを含みます」を最初から非表示にするCSSでした。

2023年10月01日から、ステマ規制が厳しくなったので、より一層、「プロモーションを含みます」を目にする機会が増えていくんじゃないかなと思います。

2023年10月からステマ規制厳しくなるらしいので当サイトも対応

この記事では、2023年10月1日から、施行予定の「景品表示法」の「ステルスマーケティング規制」につい ...

 https://www.naporitansushi.com/stealth-marketing-regulations...