From f13c8fa3de329534a0ed721bb996b194ddcd326c Mon Sep 17 00:00:00 2001
From: Niklaas Baudet von Gersdorff <me@niklaas.eu>
Date: Mon, 12 Aug 2019 21:21:38 +0200
Subject: [PATCH] feat(styles): provide `.youtube-responsive` for 16:9
 rendering

Attaching the class to a wrapper `<div>` ensures that the ratio of width
and height of the included `<iframe>` remains 16:9. This applies to all
viewing devices.

Example usage:

```
{{ youtube(id="aqz-KE-bpKQ", class="youtube-responsive") }}
```
---
 README.md       | 14 ++++++++++++++
 sass/_main.scss | 16 ++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/README.md b/README.md
index bc996db..bfc4f05 100644
--- a/README.md
+++ b/README.md
@@ -94,3 +94,17 @@ block-style automatic rendering is also supported, if enabled in the config:
 katex_enable = true
 katex_auto_render = true
 ```
+
+### Special stylesheet classes
+
+#### Rendering YouTube videos in 16:9
+
+If you want to display an embedded YouTube video in 16:9, add class
+`.youtube-responsive` when using the appropriate shortcode, e.g.:
+
+```
+{{ youtube(id="aqz-KE-bpKQ", class="youtube-responsive") }}
+```
+
+The height of the video will be scaled on different devices
+responsively.
diff --git a/sass/_main.scss b/sass/_main.scss
index 7f9c38d..c74466b 100644
--- a/sass/_main.scss
+++ b/sass/_main.scss
@@ -139,6 +139,22 @@ main {
     }
   }
 
+  .post-content {
+    .youtube-responsive {
+      height: 0;
+      padding-bottom: 56.25%; // 16:9
+      position: relative;
+
+      iframe {
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+    }
+  }
+
   .post-footer {
     margin-top: 20px;
     border-top: 1px solid #e6e6e6;