16:9 Geometry

Previously, to maintain proportions (e.g., so video doesn't compress), the " padding hack " (padding-top: 56.25%) was used. Now there's the aspect-ratio property.

How This Simplifies Life:

You set only width, and height is calculated automatically according to proportion.

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.avatar {
  width: 80px;
  aspect-ratio: 1 / 1; /* Always perfect square */
  object-fit: cover; /* So image inside doesn't squash */
}