Video & Audio

Embed self-hosted video, audio files, YouTube, Vimeo, and Bilibili videos in Hugo using the video and audio shortcodes.

Video

Embed self-hosted videos from your page bundle or assets/media/.

{{</* video src="demo.mp4" */>}}

With Poster Image

{{</* video src="demo.mp4" poster="thumb.jpg" */>}}

With Controls

By default, videos autoplay and loop. Add controls to show the video player controls instead:

{{</* video src="demo.mp4" controls="true" */>}}

Parameters

Parameter	Type	Default	Description
`src`	string	—	Required. Path to video file or remote URL
`poster`	string	`{src}.jpg`	Preview image (auto-detects matching `.jpg`)
`controls`	string	—	If present, show player controls instead of autoplay/loop
`id`	string	—	Custom ID for the `<video>` element (prefixed with `video-`)

File Resolution

Video files are resolved in this order:

Page bundle (same folder as index.md)
Media library (assets/media/)
Remote URL (if starts with http)

Audio

Embed audio files:

{{</* audio src="podcast.mp3" */>}}

Audio follows the same file resolution order as video.

YouTube, Vimeo & More

Use the embed shortcode for third-party video platforms:

{{</* embed src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" */>}}

Bilibili

Embed Bilibili videos:

{{</* bilibili id="VIDEO_ID" */>}}

Use Page Bundles (folders named index.md) so your media files (demo.mp4, podcast.mp3) can live right next to your content file. This makes src="demo.mp4" work without path headaches.