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 834a8f4e1ac8211f791216e5059307af3fa11ed0..b0711666a12f5411fa92f94e99ca857adf6bc5cb 100644 (file)
--- 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 (file)
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>