From 331b8d2250f4b1ba29c0833e2be770c3f743ffe5 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 18 Jun 2015 16:01:52 -0700
Subject: [PATCH] Add 21x9 responsive embed modifier

- Credit: @adammacias
- Fixes #16499
---
 docs/components/utilities.md | 7 ++++++-
 scss/_responsive-embed.scss  | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

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%;