From 58e4507229b6624554f80ba834ce1df10524893c Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Mon, 26 Aug 2024 05:16:43 +0300
Subject: [PATCH] Add YouTube and Vimeo embed shortcodes (fixes #57)

---
 content/demo/index.md             | 29 +++++++++++++++++++++++++++++
 sass/_iframe.scss                 | 14 ++++++++++++++
 sass/style.scss                   |  1 +
 templates/shortcodes/vimeo.html   |  4 ++++
 templates/shortcodes/youtube.html |  5 +++++
 5 files changed, 53 insertions(+)
 create mode 100644 sass/_iframe.scss
 create mode 100644 templates/shortcodes/vimeo.html
 create mode 100644 templates/shortcodes/youtube.html

diff --git a/content/demo/index.md b/content/demo/index.md
index 4b15c7b..82e5486 100644
--- a/content/demo/index.md
+++ b/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
diff --git a/sass/_iframe.scss b/sass/_iframe.scss
new file mode 100644
index 0000000..4145bf9
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/sass/style.scss b/sass/style.scss
index d31a7bd..b82290c 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -21,6 +21,7 @@
 @use "general";
 @use "hidden";
 @use "icon";
+@use "iframe";
 @use "input";
 @use "media";
 @use "nav";
diff --git a/templates/shortcodes/vimeo.html b/templates/shortcodes/vimeo.html
new file mode 100644
index 0000000..6acd96c
--- /dev/null
+++ b/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>
diff --git a/templates/shortcodes/youtube.html b/templates/shortcodes/youtube.html
new file mode 100644
index 0000000..083fd58
--- /dev/null
+++ b/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>