From: Danilo M. <redacted>
Date: Sun, 5 Apr 2026 07:38:47 +0000 (+0200)
Subject: feat: add video shortcode and documentation
X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=7de9682e8f3d6a1a6819c1a26c332ff72dbeaaa4;p=danix2-hugo-theme.git

feat: add video shortcode and documentation

Ported video shortcode from previous theme. Embeds HTML5 videos with optional autoplay, loop, and muted controls. Supports mp4, webm, and other HTML5 video formats.

Usage: {{< video src="video.mp4" width=800 height=450 autoplay=true loop=true muted=true >}}

Also updated CONTENT_GUIDE with comprehensive usage examples and parameters.

Co-Authored-By: Claude Haiku 4.5 <redacted>
---

diff --git a/CONTENT_GUIDE.md b/CONTENT_GUIDE.md
index 834a8f4..b071166 100644
--- a/CONTENT_GUIDE.md
+++ b/CONTENT_GUIDE.md
@@ -624,6 +624,45 @@ Figure with clickable link:
 
 ---
 
+### Video Shortcode
+
+The `video` shortcode embeds HTML5 videos with controls, optional autoplay, looping, and muting. Supports mp4, webm, and other HTML5 video formats.
+
+**Usage:**
+```hugo
+{{< video src="my-video.mp4" width=600 height=400 >}}
+```
+
+**Parameters:**
+- `src` (required) — Path to video file (mp4, webm, etc.)
+- `width` (optional) — Video width in pixels
+- `height` (optional) — Video height in pixels
+- `autoplay` (optional) — true/false (default: false)
+- `loop` (optional) — true/false (default: false)
+- `muted` (optional) — true/false (default: false)
+- `class` (optional) — CSS class for styling
+
+**Note:** The `muted` attribute is often required for autoplay to work in modern browsers.
+
+**Examples:**
+
+Simple video with controls:
+```hugo
+{{< video src="demo.mp4" width=800 height=450 >}}
+```
+
+Auto-looping muted video (useful for GIF-like effects):
+```hugo
+{{< video src="animation.mp4" width=640 height=480 autoplay=true loop=true muted=true >}}
+```
+
+Styled video with custom class:
+```hugo
+{{< video src="tutorial.webm" width=1024 height=576 class="responsive-video" >}}
+```
+
+---
+
 ## Troubleshooting
 
 ### Article doesn't appear on site
diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html
new file mode 100644
index 0000000..aa30a13
--- /dev/null
+++ b/layouts/shortcodes/video.html
@@ -0,0 +1,37 @@
+{{/*
+	* The video shortcode:
+	* All arguments are optional, except for src which is where you define your video file
+	* This shortcode supports webm, mp4, and other HTML5 video formats.
+	* Args:
+	*		src: [string] Path to video file (required)
+	*		class: [string] The class(es) to give to the video block.
+	*		width: [int] The width of the video
+	*		height: [int] The height of the video
+	*		autoplay: [bool] true or false for autoplay - defaults to false
+	*		loop: [bool] true or false for loop - defaults to false
+	*		muted: [bool] true or false for mute - defaults to false
+	*
+	* Usage:
+	*		{{< video src="my-video.mp4" width=600 height=400 autoplay=true loop=true muted=true class="responsive-video" >}}
+	*
+	* Output:
+	*	<video class="responsive-video" controls preload="auto" width="600" height="400" autoplay loop muted playsinline>
+	*		<source src="my-video.mp4" type="video/mp4">
+	*	</video>
+	*
+	*/}}
+
+{{ $ext := (.Get "src") | path.Ext }}
+{{ $filetype := slicestr $ext 1}}
+
+<video{{ with .Get "class" }} class="{{ . }}"{{ end }}
+	controls
+	preload="auto"
+	{{ with .Get "width" }}width="{{.}}"{{ end }}
+	{{ with .Get "height" }}height="{{.}}"{{ end }}
+	{{ if eq (.Get "autoplay") "true" }}autoplay {{ end }}
+	{{ if eq (.Get "loop") "true" }}loop {{ end }}
+	{{ if eq (.Get "muted") "true" }}muted {{ end }}
+	playsinline >
+    <source src="{{ ( .Get "src" ) }}" type="video/{{ $filetype }}">
+</video>