4
4

More than 5 years have passed since last update.

Adblock有効時のYouTube埋め込みコード対処

Posted at

Adblockについて

Adblockとは、Webサイト上の広告を自動的に非表示にする拡張機能です。
全世界のネット人口のうち4.9%、数にして1億4400万ユーザーも存在しているそうです。

Adblockが使われている時の問題

多くのキャンペーンサイトで、YouTubeの埋め込みコードで動画を紹介しているサイトを見かけます。
しかし、AdblockでYouTubeの埋め込みコードがブロックされてしまい空白ができてしまいます。

恥ずかしながら自分自身YouTubeの広告に嫌気をさしてAdblockを愛用するようになった一人です。
とあるWebサイトを閲覧していると、画面全体が空白になっており、直帰した経験が何度もあります。
たまたまAdblock非有効時に閲覧をすると動画の存在を知りました。

そういった経緯からYouTube埋め込みコードを用いる場合には
Adblockユーザーのために動画の存在を示す必要があるなと思った次第です。

Adblockユーザーのための実装

対処その1 - HTML / CSSのみで対処する
jsdo.itに簡単にサンプルを用意しましたのでご覧ください。
Adblock有効時のYouTube埋め込みコード対処サンプル

Adblock有効時には埋め込みコードの「iframe」が非表示になってしまいます。
iframeが非表示になると下敷きになっている要素が出現するという簡単な構造です。


対処その2 - FuckAdblockを使う
FuckAdBlockを使う。
本格的には使ったことありませんが、JavaScriptでAdblockのON / OFFを取得することができます。
これを使って本格的に対処するのもアリだと思います。


対処その3 - そもそもYouTubeを使わない
YouTubeからの埋め込みコードはブロックされてしまいます。
しかし、たしかVimeoからの埋め込みコードはブロックされなかったかと思います。(曖昧な記憶ですがw)

自分のサーバーに動画を置いても良いのならVideoタグを使うことも視野に入れておくのも良いのではないでしょうか。


以上
そもそもAdblockユーザーへの配慮は必要なのかしら・・・www
ご意見ございましたら、よろしくお願い致します。

ご覧いただきありがとうございました。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4