MediaShipped

Video

A 3:1 thumbnail that morphs to the film's 16:9 on play. Controls are the site's one button form: an ink pill.

Show code

<div class="vid"><img src="../assets/img/shot.webp" alt="" width="900" height="488"><button class="vid-start" aria-label="Play the film"><span class="ring"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></span></button></div>

Playing

Show code

<div class="vid open d-vid-demo"><img src="../assets/img/shot.webp" alt="" width="900" height="488">
  <div class="vid-bar"><button class="vid-btn" aria-label="Pause"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></button><button class="vid-btn" aria-label="Mute"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></button><button class="vid-btn" aria-label="Full screen"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></button></div>
  <div class="vid-prog"></div>
</div>

The poster and the video are both full 16:9 frames under object-fit:cover at a fixed width, so the morph only uncovers the top and bottom - it never zooms.
The play ring breathes two halos half a beat apart; reduced motion stops them.
Control buttons are 88 × 44 - twice the target wide, because three at 44 square read cramped.
Progress is the comet, inverted to paper on the dark film.
Below 640 the thumbnail goes 2:1, because 3:1 at phone width is a 110px letterbox.