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 (`
`)
```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 @@
+
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 @@
+