Remix.run Logo
tempodox 2 days ago

Wow, that Video tab looks gorgeous. I still don't understand yet how it's actually done.

kris-kay 2 days ago | parent [-]

Thanks! Do you mean how the glass or how the video background is done?

tempodox 2 days ago | parent [-]

The background.

kris-kay 2 days ago | parent [-]

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.

account42 12 hours ago | parent [-]

> 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.