site/themes/github.com/davegallant/hugo-theme-gruvbox/content/blog/embed-video-files/index.md

title, date, draft, comments, socialShare, toc

title	date	draft	comments	socialShare	toc
Embed Video Files	2022-04-26T01:16:18+02:00	false	false	true	false

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

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

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:

Attribute	Default
autoplay	false
controls	true
height
loop	false
muted	true
preload
width	100%
playsinline	true

Learn more about the <video> attributes here.