diff --git a/content/blog/say-hello-to-doks/index.md b/content/blog/say-hello-to-doks/index.md
index e9c3185..4caa3eb 100644
--- a/content/blog/say-hello-to-doks/index.md
+++ b/content/blog/say-hello-to-doks/index.md
@@ -9,3 +9,39 @@ weight: 50
 images: ["say-hello-to-doks.png"]
 contributors: ["Henk Verlinde"]
 ---
+
+## Video shortcode
+
+### Usage
+
+```md
+{{</* video ratio="16x9" attributes="controls autoplay muted" webm-src="videos/flower.webm" mp4-src="videos/flower.mp4" */>}}
+```
+
+| Parameters | Values |
+|----------|-------------|------|
+| ratio | <1x1 \| 4x3 \| 16x9 \| 21x9> |
+| attributes | [[Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes)] |
+| webm-src | [path/to/file.webm] |
+| mp4-src | [path/to/file.mp4] |
+{.table-striped}
+
+### Renders
+
+```html
+<div class="ratio ratio-16x9">
+  <video controls autoplay muted>
+    <source src="/videos/flower.webm" type="video/webm">
+    <source src="/videos/flower.mp4" type="video/mp4">
+    Sorry, your browser doesn't support embedded videos.
+  </video>
+</div>
+```
+
+{{< video ratio="16x9" attributes="controls autoplay muted" webm-src="videos/flower.webm" mp4-src="/videos/flower.mp4" >}}
+
+## Resources
+
+- [\<video\>: The Video Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
+- [Ratios](https://getbootstrap.com/docs/5.0/helpers/ratio/)
+- [Custom aspect ratios](https://getbootstrap.com/docs/5.0/helpers/ratio/#sass-map)
diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html
new file mode 100644
index 0000000..784c3a7
--- /dev/null
+++ b/layouts/shortcodes/video.html
@@ -0,0 +1,11 @@
+<div class="ratio ratio-{{ with .Get "ratio" }}{{.}}{{ end }}">
+  <video{{ with .Get "attributes" }} {{ . | safeHTMLAttr }}{{ end }}>
+    {{ with .Get "webm-src" -}}
+    <source src="{{ . | relURL }}" type="video/webm">
+    {{ end -}}
+    {{ with .Get "mp4-src" -}}
+    <source src="{{ . | relURL }}" type="video/mp4">
+    {{ end -}}
+    Sorry, your browser doesn't support embedded videos.
+  </video>
+</div>
diff --git a/static/videos/flower.mp4 b/static/videos/flower.mp4
new file mode 100644
index 0000000..bd91051
Binary files /dev/null and b/static/videos/flower.mp4 differ
diff --git a/static/videos/flower.webm b/static/videos/flower.webm
new file mode 100644
index 0000000..5b8edf7
Binary files /dev/null and b/static/videos/flower.webm differ