<scroll-video>

A video that fills the available width and scrubs as you scroll. It picks a landscape or portrait clip to match the viewport, shows a poster until the first frame is ready, and paints your background colour behind everything.

Scroll down. Rotate your phone or resize the window past a square aspect ratio to see it swap clips.

Usage

<script src="scroll-video.js"></script>

<scroll-video
  src-landscape="clip-16x9.mp4"
  src-portrait="clip-9x16.mp4"
  poster="clip-16x9.jpg"
  poster-portrait="clip-9x16.jpg"
  background="#0b1020"
  scroll-length="400vh">
  <!-- optional overlay content -->
</scroll-video>

Below: the same element with fit="contain", a shorter frame and a different background, so the letterbox bars show the colour.

That's it

Encode clips with a keyframe on every frame (ffmpeg -g 1) so seeks are instant. Keep them short and muted; the element never plays audio, it only seeks.