aboutsummaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/base.css29
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;
+}