From ca3943b5007ea7cb6a27bbf3e02648d5271231ea Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 06 Aug 2024 02:14:14 +0000
Subject: [PATCH] fix: responsive youtube embed (closes #1167)
---
quartz/styles/base.scss | 7 +++++++
quartz/plugins/transformers/ofm.ts | 6 ++----
2 files changed, 9 insertions(+), 4 deletions(-)
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 5ec7c5a..dd2eaee 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -616,11 +616,10 @@
// 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 @@
// 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 8e791db..79b05cd 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -541,3 +541,10 @@
overflow-x: auto;
overflow-y: hidden;
}
+
+.external-embed.youtube {
+ aspect-ratio: 16 / 9;
+ height: 100%;
+ width: 100%;
+ border-radius: 5px;
+}
--
Gitblit v1.10.0