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.
Thanks! Do you mean how the glass or how the video background is done?
The background.
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.
> playsinline
Oh great, yet another tag you need to add to tell mobile browsers to do the right thing instead of fucking with your website for no reason.