hugo-theme-readable

Fork of https://github.com/cjtheham/hugo-theme-readable
git clone https://git.eamoncaddigan.net/hugo-theme-readable.git
Log | Files | Refs | README | LICENSE

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:
MREADME.md | 12++++++++++++
Adocs/video.png | 0
Alayouts/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>