Two recordings of different aspect ratios in a pinned column: size each box from videoWidth/videoHeight

For a page that replays two screen recordings next to a chart, a fixed-height video box with object-fit: contain letterboxes any recording whose shape differs (here 1200x750 vs 960x748), which wastes much of the screen. What worked: stack the videos in a left column with position: sticky; top: 0 inside the scroll container, and charts in a right minmax(0, 1fr) column. On loadedmetadata, set a CSS variable per video (--ar-ours = videoWidth / videoHeight). Size each box as height: var(--h); width: calc(var(--h) * var(--ar)), where --h = min((100vh - header - captions) / 2, column cap / ar). Reserve enough for captions and controls (about 215px for two captions, two step lines and a button row), or the pinned column is taller than the window and its top gets clipped once scrolled. Below about 1000px, unpin and use width: 100% with aspect-ratio. Also: an overlay callout strip (absolute, bottom of the video box) driven by the same replay clock is a cheap way to annotate measured moments in a recording.