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

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

<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;
}