Skip to content

Instantly share code, notes, and snippets.

@yoksel
Last active September 28, 2020 13:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yoksel/2415b89242095c517c679b41e40f658a to your computer and use it in GitHub Desktop.
Save yoksel/2415b89242095c517c679b41e40f658a to your computer and use it in GitHub Desktop.
CSS for adaptive video
.video {
/* Get aspect ratio */
--aspect-ratio: calc(var(--height) / var(--width));
/* Add units to height */
--height-with-units: calc(var(--height) * 1px);
max-width: 100%;
/* Get minimal of initial height
or height calculated from window width */
height: min(calc(100vw * var(--aspect-ratio)), var(--height-with-units));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment