Add YouTube and Vimeo embed shortcodes (fixes #57)

content/demo/index.md

@@ -239,6 +239,35 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou
 
 There's also a `cursor` class that you can add to a span with e.g. `█` character to simulate the terminal cursor. It doesn't work from inside Markdown code blocks though.
 
+#### YouTube
+
+Allows to embed a YouTube video using youtube-nocookie.
+
+Available variables are:
+
+- `autoplay`: Whether the video should autoplay.
+- `start`: On which second video should start.
+
+```jinja2
+{{/* youtube(id="0Da8ZhKcNKQ") */}}
+```
+
+{{ youtube(id="0Da8ZhKcNKQ") }}
+
+#### Vimeo
+
+Allows to embed a Vimeo video.
+
+Available variables are:
+
+- `autoplay`: Whether the video should autoplay.
+
+```jinja2
+{{/* vimeo(id="869483483") */}}
+```
+
+{{ vimeo(id="869483483") }}
+
 ### Description List (`<dl>`)
 
 ```html

sass/_iframe.scss

@@ -0,0 +1,14 @@
+iframe {
+	margin: 1rem auto;
+	box-shadow: var(--edge-highlight), var(--shadow);
+	border: none;
+	border-radius: var(--rounded-corner);
+	background-color: var(--fg-muted-1);
+	width: 100%;
+	max-width: 100%;
+
+	&.youtube-embed,
+	&.vimeo-embed {
+		aspect-ratio: 16 / 9;
+	}
+}

sass/style.scss

@@ -21,6 +21,7 @@
 @use "general";
 @use "hidden";
 @use "icon";
+@use "iframe";
 @use "input";
 @use "media";
 @use "nav";

templates/shortcodes/vimeo.html

@@ -0,0 +1,4 @@
+<iframe class="vimeo-embed"
+    src="https://player.vimeo.com/video/{{ id }}{% if autoplay %}?autoplay=1{% endif %}"
+    allow="autoplay; fullscreen; picture-in-picture"
+    allowfullscreen></iframe>

templates/shortcodes/youtube.html

@@ -0,0 +1,5 @@
+<iframe class="youtube-embed"
+	src="https://www.youtube-nocookie.com/embed/{{ id }}{% if autoplay %}?autoplay=1{% endif %}{% if autoplay and start %}&start={{ start }}{% elif start %}?start={{ start }}{% endif %}"
+	title="YouTube video player"
+	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+	referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>