Created
November 1, 2022 19:05
-
-
Save malipetek/8515907058229ce32d09888c8f67edb9 to your computer and use it in GitHub Desktop.
Video overlay for hiding pixelation on webpages
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| video-container { | |
| position: relative; | |
| } | |
| .video-container:after { | |
| display: block; | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20mm" height="20mm" viewBox="0 0 20 20"><path d="M0 0h10v10H0zM10 10h10v10H10z" style="stroke-width:.050089"/></svg>'); | |
| background-size: 2px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Put your video inside the container with 0.5 of the size of container resolution. Add this overlay and your pixelation does not look like pixelation but a darkening effect.