From a64362c084ad6ebd9bfcf1476da246449e034bcc Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Mon, 17 Oct 2022 02:57:45 +0100
Subject: [PATCH] feat: youtube auto size

---
 showcase.json                   |  3 ++-
 src/markdown/remark-youtube.ts  | 35 ++++++++++++++++++++++++---------
 src/markdown/sanitize-schema.ts |  1 +
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/showcase.json b/showcase.json
index 31b24285..17feac78 100644
--- a/showcase.json
+++ b/showcase.json
@@ -53,5 +53,6 @@
   "kumasanki",
   "luftmonsch",
   "ventuss",
-  "jingfelix"
+  "jingfelix",
+  "tongyi"
 ]
diff --git a/src/markdown/remark-youtube.ts b/src/markdown/remark-youtube.ts
index 70e49934..433ee24b 100644
--- a/src/markdown/remark-youtube.ts
+++ b/src/markdown/remark-youtube.ts
@@ -19,17 +19,34 @@ export const remarkYoutube: Plugin<Array<void>, Root> = () => (tree, file) => {
         file.fail("Text directives for `youtube` not supported", node)
       if (!id) file.fail("Missing video id", node)
 
-      data.hName = "iframe"
+      data.hName = "div"
       data.hProperties = {
-        src: "https://www.youtube.com/embed/" + id,
-        width: 728,
-        height: 409.5,
-        frameBorder: 0,
-        allow:
-          "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-        allowFullScreen: true,
-        title: "YouTube video player",
+        className: ["xlog-post-content-youtube"],
+        style: "position: relative; padding-bottom: 56.25%; height: 0;",
       }
+
+      node.children = [
+        {
+          type: "leafDirective",
+          data: {
+            hName: "iframe",
+            hProperties: {
+              src: "https://www.youtube.com/embed/" + id,
+              width: 728,
+              height: 409.5,
+              frameBorder: 0,
+              allow:
+                "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+              allowFullScreen: true,
+              title: "YouTube video player",
+              style:
+                "position: absolute; top: 0; left: 0; width: 100%; height: 100%;",
+            },
+          },
+          children: [],
+          name: "iframe",
+        },
+      ]
     }
   })
 }
diff --git a/src/markdown/sanitize-schema.ts b/src/markdown/sanitize-schema.ts
index c5cd79b9..a44252e8 100644
--- a/src/markdown/sanitize-schema.ts
+++ b/src/markdown/sanitize-schema.ts
@@ -34,6 +34,7 @@ const scheme = {
       "width",
       "height",
       "allow",
+      "style",
     ],
   },
 }