Re:Show HN: CSS generator for a high-def glass effect
by tempodox on Wednesday July 02, 2025 @04:40PM
(#44448580)
The background.
[ Parent
| on HN ]
Re:Show HN: CSS generator for a high-def glass effect
by kris-kay on Wednesday July 02, 2025 @05:09PM
(#44448859)
So you need a video HTML tag with all of these attributes:
<video
autoplay
muted
loop
webkit-playsinline
playsinline
sizes="100vw">
and the CSS: .bg-video { position: fixed; z-index: -1; inset: 0; width: 100%; (don't set this to 100vw or you will have scrollbar issues) height: 100%; min-height: 100vh; object-fit: cover; object-position: center; pointer-events: none; }
The part I still need to do myself is provide multiple video sizes and show the one that's most suitable for the viewport.