1 files changed, 29 insertions, 0 deletions
diff --git a/css/base.css b/css/base.css
index 9928c8c..9acdaed 100644
--- a/css/base.css
+++ b/css/base.css
@@ -416,3 +416,32 @@ section {
         text-align: center;
     }
 }
+
+/* ==================================================================
+ * Embeded videos using iframe with fixed aspect ratio
+ * ================================================================== */
+
+/* This solution for preserving the 'iframe' aspect ratio was taken
+   from here:
+   https://stackoverflow.com/questions/25302836/responsive-video-iframes-keeping-aspect-ratio-with-only-css#35153397
+   */
+
+/* This element defines the size the iframe will take.  In this
+   example we want to have a ratio of 25:14 */
+.aspect-ratio {
+  position: relative;
+  width: 100%;
+  height: 0;
+  /* The height of the item will now be 56.25% of the width. */
+  padding-bottom: 56.25%;
+}
+
+/* Adjust the iframe so it's rendered in the outer-width and
+   outer-height of it's parent */
+.aspect-ratio iframe {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}