From: Mark Otto <markdotto@gmail.com>
Date: Thu, 18 Jun 2015 23:01:52 +0000 (-0700)
Subject: Add 21x9 responsive embed modifier
X-Git-Tag: v4.0.0-alpha~179
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=331b8d2250f4b1ba29c0833e2be770c3f743ffe5;p=thirdparty%2Fbootstrap.git

Add 21x9 responsive embed modifier

- Credit: @adammacias
- Fixes #16499
---

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 57a5d87b97..f67cb630f2 100644
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -296,9 +296,14 @@ Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` e
 </div>
 {% endexample %}
 
-Aspect ratios can be customized. There are two available in Bootstrap, 16x9 and 4x3 (two of the most common for video).
+Aspect ratios can be customized with modifier classes.
 
 {% highlight html %}
+<!-- 21:9 aspect ratio -->
+<div class="embed-responsive embed-responsive-21by9">
+  <iframe class="embed-responsive-item" src="..."></iframe>
+</div>
+
 <!-- 16:9 aspect ratio -->
 <div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="..."></iframe>
diff --git a/scss/_responsive-embed.scss b/scss/_responsive-embed.scss
index c1ef6cb4ba..bedab270a1 100644
--- a/scss/_responsive-embed.scss
+++ b/scss/_responsive-embed.scss
@@ -26,6 +26,11 @@
   }
 }
 
+// Modifier class for 21:9 aspect ratio
+.embed-responsive-21by9 {
+  padding-bottom: 42.85%;
+}
+
 // Modifier class for 16:9 aspect ratio
 .embed-responsive-16by9 {
   padding-bottom: 56.25%;