yuriy/quartz-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: responsive youtube embed (closes #1167)

Browse Source
This commit is contained in:
Jacky Zhao
2024-08-05 19:14:09 -07:00
parent 6c4ed249ba
commit ca3943b500
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
quartz/plugins/transformers/ofm.ts
View File

@@ -616,11 +616,10 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
// YouTube video (with optional playlist) // YouTube video (with optional playlist)
node.tagName = "iframe" node.tagName = "iframe"
node.properties = { node.properties = {
class: "external-embed", class: "external-embed youtube",
allow: "fullscreen", allow: "fullscreen",
frameborder: 0, frameborder: 0,
width: "600px", width: "600px",
height: "350px",
src: playlistId src: playlistId
? `https://www.youtube.com/embed/${videoId}?list=${playlistId}` ? `https://www.youtube.com/embed/${videoId}?list=${playlistId}`
: `https://www.youtube.com/embed/${videoId}`, : `https://www.youtube.com/embed/${videoId}`,
@@ -629,11 +628,10 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
// YouTube playlist only. // YouTube playlist only.
node.tagName = "iframe" node.tagName = "iframe"
node.properties = { node.properties = {
class: "external-embed", class: "external-embed youtube",
allow: "fullscreen", allow: "fullscreen",
frameborder: 0, frameborder: 0,
width: "600px", width: "600px",
height: "350px",
src: `https://www.youtube.com/embed/videoseries?list=${playlistId}`, src: `https://www.youtube.com/embed/videoseries?list=${playlistId}`,
} }
} }

7
quartz/styles/base.scss
View File

@@ -541,3 +541,10 @@ ol.overflow {
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
} }
.external-embed.youtube {
aspect-ratio: 16 / 9;
height: 100%;
width: 100%;
border-radius: 5px;
}