Embed Video Files

Use the video shortcode to embed your video files from Hugo Page Resources.

With a page bundle looking like the following:

embed-videos/
|-- index.md
|-- my-video.jpg
|-- my-video.mp4
|-- my-video.webm

You can embed my-video like this:

{{< video src="my-video" autoplay="true" controls="false" loop="true" >}}

The shortcode looks for media files matching the filename my-video*. For each video MIME type file, a <source> element is added. The first image MIME type file is used as poster (thumbnail). It will render the following HTML:

<video
  autoplay
  loop
  poster="/blog/embed-videos/my-video.jpg"
  width="100%"
  playsinline
>
  <source src="/blog/embed-videos/my-video.mp4" type="video/mp4" />
  <source src="/blog/embed-videos/my-video.webm" type="video/webm" />
</video>

You can set a Markdown caption, wrapping the <video> inside a <figure>.

Additionally, the shortcode allows you to set the following attributes:

Learn more about the <video> attributes here.