From 6a5a83e02c336f6ba73a5dc5cd4cb28cc2f8f497 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=AA=E3=81=A4=E3=81=8D?= <i@ntk.me>
Date: Fri, 15 Apr 2016 01:40:51 -0700
Subject: [PATCH] Fix responsive embed class in flex container

---
 scss/_responsive-embed.scss | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/scss/_responsive-embed.scss b/scss/_responsive-embed.scss
index 2443219591..d3362b6fdb 100644
--- a/scss/_responsive-embed.scss
+++ b/scss/_responsive-embed.scss
@@ -3,10 +3,15 @@
 .embed-responsive {
   position: relative;
   display: block;
-  height: 0;
+  width: 100%;
   padding: 0;
   overflow: hidden;
 
+  &::before {
+    display: block;
+    content: "";
+  }
+
   .embed-responsive-item,
   iframe,
   embed,
@@ -23,17 +28,25 @@
 }
 
 .embed-responsive-21by9 {
-  padding-bottom: percentage(9 / 21);
+  &::before {
+    padding-top: percentage(9 / 21);
+  }
 }
 
 .embed-responsive-16by9 {
-  padding-bottom: percentage(9 / 16);
+  &::before {
+    padding-top: percentage(9 / 16);
+  }
 }
 
 .embed-responsive-4by3 {
-  padding-bottom: percentage(3 / 4);
+  &::before {
+    padding-top: percentage(3 / 4);
+  }
 }
 
 .embed-responsive-1by1 {
-  padding-bottom: percentage(1 / 1);
+  &::before {
+    padding-top: percentage(1 / 1);
+  }
 }