動画にかけるドットフィルターをCSSのみで実装する

Webサイトに動画を設置する機会は多くなり、メインビジュアルの背景でループさせているサイトをよく見かけます。その際高画質で見せたいところなのですが、モバイルを考慮するとどうしてもサイズを小さくしないといけなくなり画質が悪くなります。その時にドットフィルターをかけると画質の粗さを目立たなくなるのでよく実装しています。今回はCSSのみでドットフィルターを実装する方法を紹介します。

See the Pen
Movie filter by Kobayashi (@Pulp_Kobayashi)
on CodePen.

<div class="movie">
	<video src="movie.mp4" loop autoplay muted playsinline></video>
</div>

.movie {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.movie::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
	background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
}

擬似要素.movie::afterにドットフィルターを描写してフィルターをかけます。

background-color: rgba(0,0,0,0.5)でフィルター全体に半透明の背景色を指定します。
円形グラデーションbackground-image: radial-gradientでドットの指定をしています。

background-size: 4px 4pxの半分サイズをbackground-position: 0 0, 2px 2px;の2px部分に指定。これでドットが敷き詰められた状態で表示されます。

全体の横半分のサイズwidth: 50%にしているのはデモで違いが分かりやすくしているためなので、実際に実装する際は１００％指定にしてください。