From ca3943b5007ea7cb6a27bbf3e02648d5271231ea Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 5 Aug 2024 19:14:09 -0700
Subject: [PATCH] fix: responsive youtube embed (closes #1167)

---
 quartz/plugins/transformers/ofm.ts | 6 ++----
 quartz/styles/base.scss            | 7 +++++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 5ec7c5a7a..dd2eaee31 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -616,11 +616,10 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                   // YouTube video (with optional playlist)
                   node.tagName = "iframe"
                   node.properties = {
-                    class: "external-embed",
+                    class: "external-embed youtube",
                     allow: "fullscreen",
                     frameborder: 0,
                     width: "600px",
-                    height: "350px",
                     src: playlistId
                       ? `https://www.youtube.com/embed/${videoId}?list=${playlistId}`
                       : `https://www.youtube.com/embed/${videoId}`,
@@ -629,11 +628,10 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                   // YouTube playlist only.
                   node.tagName = "iframe"
                   node.properties = {
-                    class: "external-embed",
+                    class: "external-embed youtube",
                     allow: "fullscreen",
                     frameborder: 0,
                     width: "600px",
-                    height: "350px",
                     src: `https://www.youtube.com/embed/videoseries?list=${playlistId}`,
                   }
                 }
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 8e791db5c..79b05cd5e 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -541,3 +541,10 @@ ol.overflow {
   overflow-x: auto;
   overflow-y: hidden;
 }
+
+.external-embed.youtube {
+  aspect-ratio: 16 / 9;
+  height: 100%;
+  width: 100%;
+  border-radius: 5px;
+}