When square pixels aren't square

Summary

When square pixels aren’t square When I embed videos in web pages, I specify an aspect ratio. For example, if my video is 1920 × 1080 pixels, I’d write:<video style="aspect-ratio: 1920 / 1080"> If I also set a width or a height, the browser now knows exactly how much space this video will take up on the page – even if it hasn’t loaded the video file yet. When it initially renders the page, it can leave the right gap, so it doesn’t need to rearrange when the video eventually loads. (The technical term is “reducing cumulative layout shift”.)That’s the idea, anyway.I noticed that some of my videos weren’t fitting in their allocated boxes. When the video file loaded, it could be too small and get letterboxed, or be too big and force the page to rearrange to fit. Clearly there was a bug in my code for computing aspect ratios, but what?Three aspect ratios, one videoI opened one of the problematic videos in QuickTime Player, and the resolution listed in the Movie Inspector was rather curious: Resolution: 1920 × 1080 (1350 × 1080).The first resolution is what my code was reporting, but the second resolution is what I actually saw when I played the video. Why are there two?The storage aspect ratio (SAR) of a video is the pixel resolution of a raw frame. If you extract a single frame as a still image, that’s the size of the image you’d get. This is the first resolution shown by QuickTime Player, and it’s what I was reading in my code.I was missing a key value – the pixel aspect ratio (PAR). This describes the shape of each pixel, in particular the width-to-height ratio. It tells a video player how to stretch or squash the stored pixels when it displays them. This can sometimes cause square pixels in the stored image to appear as rectangles.A 3×3 grid of pixels, where each pixel is a rectangle that's taller than it is wide.A 3×3 grid of pixels, where each pixel is a square.A 3×3 grid of pixels, where each pixel is a rectangle that's wider than it is tall.PAR < 1 portrait pixel...