feat: youtube auto size

showcase.json

@@ -53,5 +53,6 @@
   "kumasanki",
   "luftmonsch",
   "ventuss",
-  "jingfelix"
+  "jingfelix",
+  "tongyi"
 ]

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",
+        },
+      ]
     }
   })
 }

src/markdown/sanitize-schema.ts

@@ -34,6 +34,7 @@ const scheme = {
       "width",
       "height",
       "allow",
+      "style",
     ],
   },
 }