Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Hugo created shortcodes to circumvent these limitations.

Hugo comes with shortcodes to insert videos from Youtube or Vimeo, but misses the support of local videos. Here is how to add it

Create a shortcode file

Create a file layouts/shortcodes/video.html containing these lines:

<video class="video-shortcode" preload="{{ .Get "preload" }}" controls>
    <source src="{{ .Get "src" }}" type="{{ .Get "type" }}">
    There should have been a video here but your browser does not seem
    to support it.
</video>

Insert the shortcode

You can now insert a video in your Markdown file:
{{< video src="/holiday.webm" type="video/webm" preload="auto" >}}

You can also use mp4, just change the type for video/mp4.

Your video must be in the static folder. You can use a subfolder and adapt the path. For example, you can store the videos in /static/videos, then use src="/videos/holiday.webm"

Make it responsive with CSS

.video-shortcode {
  max-width: 100%;
  height: auto;
}

References

This technique is inspired by the theme NoTrack and the official documentation

Roadmap

  • add support for autoplay="true"
  • add support for loop="true"