Riff / Built on the open web / Behaviour

aspect-ratio

Reserves the video's box and each record cover's square before anything loads.

The Listen page: the library, nine albums as drawn record covers — The nine square covers, each a box that holds its place before the image loads.

How Riff uses it

The single video element in Now Playing reserves a 16:9 black box at the stage's width before any frame has loaded, so switching to Video does not resize the stage. In the library each record cover is a square box with a placeholder background, so the grid lays out at its final size before the images arrive.

Why

Without a declared ratio the video would sit at the browser's 300 by 150 default until metadata loads, and the grid would reflow as each cover came in.

Without it

The video takes its default box until it has dimensions, and the cards take the height of their image.

Where

plugins/riff/assets/riff.css, line 912
```
aspect-ratio: 16 / 9;
```
plugins/riff/assets/riff.css, line 1619
```
aspect-ratio: 1;
```

Links open the source at the commit this page was published from.

Reference: aspect-ratio on MDN.