From 135ea0010024826b090789f4dcab8af8e85ecfc6 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 24 Jan 2017 19:01:19 +0800
Subject: CHG: Improve media, docs, Asian typography and examples

---
 src/media.less | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

(limited to 'src/media.less')

diff --git a/src/media.less b/src/media.less
index d4d2f89..1072304 100644
--- a/src/media.less
+++ b/src/media.less
@@ -6,18 +6,26 @@
 }
 
 .video-responsive {
-  height: 0;
+  display: block;
   overflow: hidden;
-  padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */
-  padding-top: 3rem;
+  padding: 0;
   position: relative;
+  width: 100%;
+
+  &::before {
+    content: "";
+    display: block;
+    padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */
+  }
 
   iframe,
   object,
   embed {
+    bottom: 0;
     height: 100%;
     left: 0;
     position: absolute;
+    right: 0;
     top: 0;
     width: 100%;
   }
@@ -29,7 +37,15 @@
 }
 
 .video-responsive-4-3 {
-  padding-bottom: 75%; /* 4:3 */
+  &::before {
+    padding-bottom: 75%; /* 4:3 */
+  }
+}
+
+.video-responsive-1-1 {
+  &::before {
+    padding-bottom: 100%; /* 1:1 */
+  }
 }
 
 .figure {
-- 
cgit v1.3.1-26-gb76a