Add responsive embed class for 1:1 aspect ratio

Closes #18141

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 3bc0547747b395a3fb185aedaa0a0acb483ccc8f..c2ac73bbc1355b4c448045d8a50783d561181822 100644 (file)
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -328,4 +328,9 @@ Aspect ratios can be customized with modifier classes.
 <div class="embed-responsive embed-responsive-4by3">
   <iframe class="embed-responsive-item" src="..."></iframe>
 </div>
+
+<!-- 1:1 aspect ratio -->
+<div class="embed-responsive embed-responsive-1by1">
+  <iframe class="embed-responsive-item" src="..."></iframe>
+</div>
 {% endhighlight %}

diff --git a/scss/_responsive-embed.scss b/scss/_responsive-embed.scss
index aaf8c047080ccef166aa6a7c10d56f7b7225303e..2443219591219ebe7c3205778f905de55eb3873c 100644 (file)
--- a/scss/_responsive-embed.scss
+++ b/scss/_responsive-embed.scss
@@ -33,3 +33,7 @@
 .embed-responsive-4by3 {
   padding-bottom: percentage(3 / 4);
 }
+
+.embed-responsive-1by1 {
+  padding-bottom: percentage(1 / 1);
+}