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では動作
※投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。
