From f8f7981f4bf93b925ee16ebbb84e2d0b10df942d Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Thu, 23 Mar 2023 19:11:04 +0100 Subject: [PATCH] Make use of css variables in responsive-video component. --- .../sass/components/responsive-video/_responsive-video.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/sass/components/responsive-video/_responsive-video.scss b/assets/sass/components/responsive-video/_responsive-video.scss index 71d05be..318b189 100644 --- a/assets/sass/components/responsive-video/_responsive-video.scss +++ b/assets/sass/components/responsive-video/_responsive-video.scss @@ -9,8 +9,10 @@ .responsive-video, %responsive-video { + --aspect-ratio: 9 / 16; // 16:9 aspect ratio + position: relative; - padding-bottom: calc(9 / 16 * 100%); // 16:9 aspect ratio + padding-bottom: calc(var(--aspect-ratio) * 100%); // 16:9 aspect ratio padding-top: 25px; // Height of video controls height: 0; @@ -27,6 +29,6 @@ } &--4-3 { - padding-bottom: calc(3 / 4 * 100%); // 4:3 aspect ratio + --aspect-ratio: 3 / 4; // 4:3 aspect ratio } }