TL;DR
A developer found embedded videos mis-sized on web pages because their code used stored pixel dimensions instead of display dimensions. The culprit was non-square pixels (pixel aspect ratio); using ffprobe to read sample_aspect_ratio and computing display aspect ratio fixes layout shifts.
What happened
While embedding videos with an explicit aspect-ratio style, the author noticed some videos either letterboxed or forcing page reflow when the file loaded. QuickTime Player revealed two different resolutions for a single file — the stored frame size and the displayed size — which led to the discovery that pixel aspect ratio (PAR) had not been accounted for. Stored frames (storage aspect ratio, SAR) can use non-square pixels, so the displayed dimensions (display aspect ratio, DAR) equal SAR multiplied by PAR. An example video reported a stored width of 1920 and a sample_aspect_ratio of 45:64, producing a display width of 1350. Extracting a raw frame showed visible stretch unless the pixel aspect ratio was applied. The author replaced a MediaInfo-based routine that returned only stored width/height with an ffprobe-based function that reads sample_aspect_ratio, uses Fraction to avoid floating-point rounding, and computes rounded display dimensions for accurate layout allocation.
Why it matters
- Using stored pixel dimensions alone can cause incorrect layout preallocation and cumulative layout shift when videos load.
- Non-square pixels change how stored frames map to on-screen size; the browser renders the display aspect ratio, not necessarily the storage dimensions.
- Accurate display dimensions prevent unexpected letterboxing or page reflows, improving perceived stability of a page.
- Tooling that reports only storage width/height (or rounded aspect values) can introduce small inaccuracies; reading sample_aspect_ratio avoids this.
Key facts
- QuickTime Player can show both the stored resolution (SAR) and the displayed resolution (DAR) for a video.
- DAR = SAR × PAR (display aspect ratio equals storage aspect ratio times pixel aspect ratio).
- An example ffprobe output showed width=1920, height=1080, sample_aspect_ratio=45:64, which yields a display width of 1920 × 45 / 64 = 1350.
- Extracting a single frame without applying pixel aspect ratio produced a visibly stretched image; applying PAR restored the intended look.
- The author's original Python function using pymediainfo returned only stored width/height and missed sample aspect ratio.
- pymediainfo exposes Track.aspect_ratio as a rounded string (e.g., 0.703) which can introduce small inaccuracies.
- The author implemented a new function that calls ffprobe with -print_format json to read sample_aspect_ratio, uses fractions.Fraction to avoid float rounding, and rounds the computed display width.
- If a video does not specify sample_aspect_ratio, the code assumes square pixels (PAR = 1).
- Non-square pixels are historically common in standard-definition video and appear in some modern vertical videos (e.g., stored as 1080×1080 but displayed as portrait).
What to watch next
- Ensure embed/layout code uses display aspect ratio (DAR) rather than raw stored pixel dimensions when reserving space for videos.
- Investigate whether video processing or delivery pipelines are introducing non-square pixel aspect ratios into media assets (not confirmed in the source).
- Watch for vertical videos and short-form content stored as square frames (e.g., 1080×1080) that rely on PAR to display as portrait.
Quick glossary
- Storage aspect ratio (SAR): The pixel dimensions of a raw video frame as stored in the file (width × height).
- Pixel aspect ratio (PAR) / Sample aspect ratio (SAR key): The width-to-height ratio of an individual pixel; values other than 1 mean pixels are not square and must be stretched or squashed for display.
- Display aspect ratio (DAR): The on-screen dimensions of the video after applying pixel aspect ratio to the stored frame; computed as SAR × PAR.
- Cumulative layout shift (CLS): A web performance metric describing unexpected layout movement; reserving correct media space helps reduce CLS.
Reader FAQ
Why did my video box resize after the file loaded?
The embed used stored pixel dimensions but the video had a non-unit pixel aspect ratio; the browser displayed the scaled dimensions, causing the layout change.
How can I get the correct display size programmatically?
Use a tool like ffprobe to read sample_aspect_ratio and multiply it by the stored width to compute display width, rounding the result.
Is pymediainfo sufficient to get display aspect ratio?
pymediainfo exposes an aspect_ratio property but it may be rounded; the author found ffprobe’s sample_aspect_ratio more precise.
Are non-square pixels common in modern videos?
They are relatively rare but do appear, notably in older SD formats and some vertical/short-form videos.
When square pixels aren’t square Tagged with videoPosted 5 December 2025 When I embed videos in web pages, I specify an aspect ratio. For example, if my video is 1920 × 1080…
Sources
- When square pixels aren't square
- How Big Is Your Video Again? Square Vs Rectangular Pixels
- Advanced Aspect Ratios – PAR, DAR and SAR
- pixel aspect ratio
Related posts
- Net neutrality keeps flipping: rules return, then disappear again
- University of Helsinki develops recyclable fluid to capture atmospheric CO2
- A Survey of the Fifteen Most Famous Transcendental Numbers, Explained