【CSS】videoにドットフィルターをかけよう

HTML&CSS

こんにちはtakosanです。

動画に点々のような、網目のようなエフェクトがかかっているのを見たことはあるでしょうか?

正式な名称は知りませんが、僕は勝手にドットフィルターと呼んでいます。

今回はそんなドットフィルターをCSSだけで実装する方法を解説します。

ドットフィルターってどんなの?

それはどんなんやねん?ということでまずはサンプルをご覧ください。

See the Pen Untitled by yukiwebcreate (@Yukiwebcreate) on CodePen.

くらげさんが泳いでいる動画のうえに、

小さい黒い点が網目状に配置されており、フィルターがかかっております。

なんか見たことあるって感じですよね。

動画自体がそういうエフェクトをかけてある場合もありますが、

なんとコレがCSSだけで表現できちゃうんですよね。

ドットフィルターは、目が細かく、粗い画質に対する違和感を軽減してくれる効果もあります。

記事の最後で、実際に低画質の動画を使ってフィルターのありなしを比べてみましょう。

まずは実装方法の話を進めたいと思います。

具体的な実装方法と解説

上記のサンプルから、HTMLとCSSを取り出してみます。

HTML

<div class="video-wrapper">
  <video src="https://web-den.com/wp-content/uploads/2022/08/jellyfish.mp4" muted autoplay loop playsinline></video>
</div>

CSS

.video-wrapper {
  postion: relative;
  width: 100%;
  height: 100vh;
}
.video-wrapper:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: radial-gradient(black 20%, transparent 20%),
    radial-gradient(black 20%, transparent 20%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}
video {
  position: absolute;
}

HTMLは超シンプル。

重要なCSS部分を丁寧に解説していきます。

まず、フィルターそのものは:after(疑似要素)を使って表現するので

フィルターの詳細設定はafterの中に書きます。

CSSの下記の部分では

.video-wrapper:after {
  /* 省略 */
  background-color: rgba(0, 0, 0, 0.5);
  background-image: radial-gradient(black 20%, transparent 20%),
    radial-gradient(black 20%, transparent 20%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}

background-imageがドットの形を形成し、

background-sizeがドットのサイズを決め、

background-positionでドットの位置を決めています。

background-imageの中では、

radial-gradientでドットの設定が書かれています。

※radial-gradientとは、円形にグラデーションをかけるCSS関数です

radial-gradient() - CSS: カスケーディングスタイルシート | MDN
radial-gradient() は CSS の関数で、二つ以上の色の連続的な推移が原点から放射状に広がる画像を生成します。形状は円形または楕円形にになります。関数の結果は データ型のオブジェクトであり、これは の特殊形です。


また、その設定値として、

(black 20%, transparent 20%)というのが2回書かれています。

これは、黒い点が2段、位置をずらして配置することで網の目を表現するため、

最低二つの点が必要なので2回書いています。

background-sizeでは、

ドットを(透明空間を含めて)6pxのサイズでひとつとしてリピートをかけています。

リピートはbackground-repeatで指定が必要では?と思った方、鋭いですね。

しかし実はbackground-repeatの初期値はrepeatなので今回は記述不要です。

background-positionでは、

位置をずらさずに使う0 0と、ドットのサイズの半分だけずらすために、

3px 3pxという記述があります。

このposition指定をすることで網の目が再現されているわけです。

これらを記述すると上記のようなドットフィルターがかけられるわけですね。

おまけ:低画質の動画で試してみよう

ドットフィルターにはメリットがあります。

それは、こんなお悩みを解決できる点です。

背景動画などに使いたいけれど、動画が高画質でサイズが大きいと、ページの読み込みに悪影響を与えてしまう。。。

低画質動画をエフェクトでごまかす方法はないんか?

今回は皆さんの方で低画質の動画を使って、フィルターの視覚効果を試す方法をお伝えします。

まずはPixabayでフリーの動画を検索します。

そして意図的に960×540など、解像度の低い画像を選んでDLしてください。

あとは今回のフィルターCSSをコピペして当ててみるだけです。あら簡単。

ここでは、その動画をブラウザの画面いっぱいに表示し、フィルターを試してみたいと思います。

動画のみ↓

See the Pen css no video-filter by yukiwebcreate (@Yukiwebcreate) on CodePen.

動画+フィルター↓

See the Pen css video-filter by yukiwebcreate (@Yukiwebcreate) on CodePen.

ほら、画質の荒さがフィルターで少し軽減されますよね。

今回は動画にかけるドットフィルターをCSSで実装する方法を紹介しました。

こういったテクニックを使うと、オシャレな動画を流しながらも、ファイルサイズは軽量化しつつリソースの読み込み負荷軽減も行えるというメリットがあります。

ぜひ皆さんも使ってみてくださいね。

ではよいWebライフを~

タイトルとURLをコピーしました