hugo-theme-readable

commit 86784945422cf697ea9aeaeb45bff74e4fdfeb89
parent bbbc85d8244e4886b11dc099946769b6c62554aa
Author: Robert Lützner <robert.luetzner@pm.me>
Date:   Thu, 18 May 2023 01:14:46 +0000

feat: add a shortcode for 'video' (#10)

This shortcode will add a video element embedded in a `<figure>` with an
optional `<figcaption>`.

This fixes #1.
Diffstat:
M
README.md
 | 
12
++++++++++++
A
docs/video.png
 | 
0

A
layouts/shortcodes/video.html
 | 
8
++++++++

3 files changed, 20 insertions(+), 0 deletions(-)
diff --git a/README.md b/README.md
@@ -50,6 +50,18 @@ The above code generates the following output:
 
 ![Comparing a blockquote to an aside. The blockquote has a thin bar on it's left, while the aside element is inside a nice box with rounded corners.](/docs/blockquote_vs_aside.png)
 
+### video
+
+You can use the `video` shortcode to embed a video player in your post.
+
+```text
+{{< video source="https://test-videos.co.uk/vids/bigbuckbunny/mp4/av1/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" type="video/mp4" caption="Of course it's Big Buck Bunny!" >}}
+```
+
+![A still from an embedded video with controls in a post.](/docs/video.png)
+
+Sources can be remote or static content from your website. You can find the supported file types [here](https://www.w3schools.com/html/html5_video.asp#table1).
+
 ## Notes
 
 - Benjamin loves when new sites and projects pop up using the readable.css framework!
diff --git a/docs/video.png b/docs/video.png
Binary files differ.
diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html
@@ -0,0 +1,8 @@
+<figure>
+    <video controls>
+        <source src="{{ .Get "source" }}" type="{{ .Get "type" }}">
+    </video>
+    {{ if .Get "caption" }}
+    <figcaption>{{ .Get "caption" }}</figcaption>
+    {{ end }}
+</figure>