diff options
Diffstat (limited to 'CONTENT_GUIDE.md')
| -rw-r--r-- | CONTENT_GUIDE.md | 39 |
1 files changed, 39 insertions, 0 deletions
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 |