Allow to add more embed responsive ratios (#25894)

3 files changed, 30 insertions, 21 deletions

diff --git a/scss/_variables.scss b/scss/_variables.scss
index e721c2a65..dac260c19 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -259,6 +259,17 @@ $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 $transition-collapse:         height .35s ease !default;
 
+$embed-responsive-aspect-ratios: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$embed-responsive-aspect-ratios: join(
+  (
+    (21 9),
+    (16 9),
+    (3 4),
+    (1 1),
+  ),
+  $embed-responsive-aspect-ratios
+);
 
 // Fonts
 //
diff --git a/scss/utilities/_embed.scss b/scss/utilities/_embed.scss
index d3362b6fd..4497ac040 100644
--- a/scss/utilities/_embed.scss
+++ b/scss/utilities/_embed.scss
@@ -27,26 +27,13 @@
   }
 }
 
-.embed-responsive-21by9 {
-  &::before {
-    padding-top: percentage(9 / 21);
-  }
-}
-
-.embed-responsive-16by9 {
-  &::before {
-    padding-top: percentage(9 / 16);
-  }
-}
-
-.embed-responsive-4by3 {
-  &::before {
-    padding-top: percentage(3 / 4);
-  }
-}
+@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
+  $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
+  $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
 
-.embed-responsive-1by1 {
-  &::before {
-    padding-top: percentage(1 / 1);
+  .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
+    &::before {
+      padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
+    }
   }
 }
diff --git a/site/docs/4.1/utilities/embed.md b/site/docs/4.1/utilities/embed.md
index 4713c598c..de4105fb8 100644
--- a/site/docs/4.1/utilities/embed.md
+++ b/site/docs/4.1/utilities/embed.md
@@ -25,7 +25,7 @@ Wrap any embed like an `<iframe>` in a parent element with `.embed-responsive` a
 
 ## Aspect ratios
 
-Aspect ratios can be customized with modifier classes.
+Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
 
 {% highlight html %}
 <!-- 21:9 aspect ratio -->
@@ -48,3 +48,14 @@ Aspect ratios can be customized with modifier classes.
   <iframe class="embed-responsive-item" src="..."></iframe>
 </div>
 {% endhighlight %}
+
+Within `_variables.scss`, you can change the aspect ratios you want to use. Here's an example of the `$embed-responsive-aspect-ratios` list:
+
+{% highlight scss %}
+$embed-responsive-aspect-ratios: (
+  (21 9),
+  (16 9),
+  (3 4),
+  (1 1)
+) !default;
+{% endhighlight %}