How To: Embed Streamable.com Videos in Hugo

Hey, this is a quick little tutorial on how to embed Streamable videos to your Hugo website, like this:

Overview#

Embedding of Streamable videos doesn’t work out of the box with Hugo, but it is pretty easy to add this using Hugo shortcodes. Hugo shortcodes are small, reusable templates that allow you to embed content using small code snippets¹. You can read more about shortcodes on Hugo’s documentation.

Shortcode#

To create this custom shortcode, create a new file in the layouts/shortcodes directory. In this case, my file name is layouts/shortcodes/streamable.html.

 1{{ $id := .Get "id" }}
 2{{ $autoplay := "1" }}
 3{{ $loop := "1" }}
 4
 5{{ if isset .Params "autoplay" }}{{ $autoplay = .Get "autoplay" }}{{ end }}
 6{{ if isset .Params "loop" }}{{ $loop = .Get "loop" }}{{ end }}
 7<div style="width:100%;height:0px;position:relative;padding-bottom:40%;">
 8    <iframe src="https://streamable.com/e/{{ $id }}?autoplay={{ $autoplay }}&loop={{ $loop }}" frameborder="0"
 9        allowfullscreen allow="autoplay"
10        style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe>
11</div>

The HTML used to embed videos was sourced from the Streamable Dashboard², and is now adapted for use with Hugo. This shortcode takes one parameter named “id”, which will be the Streamable ID of the video. For example in https://streamable.com/urwirk, the ID is urwirk. It also takes in optional parameters to autoplay the video, and to keep it on a loop. “1” enables these options by default, and setting them to “0” will turn them off³.

It then uses these parameters to generate the embedded link, in https://streamable.com/e/{{ $id }}?autoplay={{ $autoplay }}&loop={{ $loop }}. This is what the shortcode expands to once it’s rendered on the website.

Then, you can just add any Streamable clip to your pages using:

1{{< streamable id="streamable-clip-id-here" >}}

Examples#

These nature clips are actually all mine! I made them during an awesome 3D Environments Course in Blender, provided by CGBoost. Above each is the shortcode used to create them.

1{{< streamable id="lm55db" autoplay="0" >}}

1{{< streamable id="6h7kri" loop="0" >}}

1{{< streamable id="qir4uj" >}}

1{{< streamable id="qir4uj" autoplay="0" loop="0" >}}