3 ms·
So you need a video HTML tag with all of these attributes: <video autoplay muted loop webkit-playsinline playsinline sizes="100vw"> and th
by kris-kay 1y ago
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 1y ago> 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.