YouTube動画にブラー効果をアニメーションで適用する

ブログ
CSS
YouTube
アニメーション
約400字

CSSのfilterプロパティを使うと、YouTubeの動画に後からぼかし効果を加えることができる。 animationプロパティと組み合わせてブラー効果を周期的に変化させるようなデモを作ってみた。 FPSゲームでダメージを食らって死にそうなときの表現に似ている。

デモ

See the Pen Blur CSS Animation on YouTube Video by y_hokkey (@hokkey) on CodePen.

互換性が低い手法

面白いので使ってみたくなるが、クロスブラウザでの動作がかなり怪しい。PCでもSPでも万全に使用できる雰囲気ではないので、仕事の案件で使うのは難しそうだ。残念。

2016年3月での検証結果

  • Chrome/Safari/Firefoxで動作
  • IE非対応
  • Android4.4.4で動作
  • iPhoneで一度フルスクリーン状態になるとそれ以降正常に適用されない。MobileSafariの仕様で自動的にフルスクリーン再生に移行してしまう為、実質的に使えない
  • iPadでは動作