feat: add video shortcode

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)

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>