fix: responsive youtube embed (closes #1167)

Jacky Zhao

2024-08-06 ca3943b5007ea7cb6a27bbf3e02648d5271231ea

fix: responsive youtube embed (closes #1167)

 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}`,
                  }
                }

 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;
}