Shortcodes are among my favorite features in Hugo. As I am currently writing several notes a week that often include small screencasts, I thought that the time had come for me to create my own screencast shortcode. Here it is:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<center>
  <video width='
    {{ if .Get "width" }}
      {{ .Get "width" }}
    {{ else }}
      100%
    {{ end }}'
  controls>
    <source src="{{ .Get `src` }}" type="video/webm">
    Your browser does not support the video tag.
  </video>
</center>

In this shortcode I have named the two arguments available:

1. src that has no default value;
2. width that is set to 100% is no value is passed.

Also, I only use .webm file as it is an open video format for the web (and the default format of screencast in GNOME). From now on, I include my screencast like so:

1

{{< screencast src="assets/myvideo.webm" >}}

and if I want to modify the width, I simply do:

1

{{< screencast src="assets/myvideo.webm" width="50%" >}}

Quite convenient, isn’t it?

A last sentence to mention that I am actually using several shortcodes for this website (including one that parses a list of authors) if you are interested, have a look at the GitHub repository.