Audio and video for HUGO

When i set up my travel blog with the static site generator HUGO, i quickly realized that there is no support for audio and video elements out of the box. This can be fixed with some simple HTML templates, that are called Shortcodes in the HUGO namespace. I use standard HTML 5 <audio> and <video> tags, but you can use more complex solutions, if you want.

The HTML files audio.html and video.html have to be placed in the subdirectory layouts/shortcodes.

<audio controls="true" preload="none" style="width: 100%;">
    <source src="{{ .Get 0 }}">
</audio> 

<video controls="true" preload="none" poster="{{ .Get 1 }}" style="width: 100%;">
    <source src="{{ .Get 0 }}">
</video>

You can then already use the templates in your post and the declared parameters will be inserted into the placeholders. The HTML files basename determines the shortcodes name.

A Song, not hosted on Soundcloud:
{{< audio "/Example.mp3" >}}

A Video, not hosted on Youtube:
{{< video "/Example.mp4" "/Thumbnail.jpg" >}}

Just like images, audio and video files have to be placed in the static folder. I think this is super intuitive and it sure looks great! Here the result for a video: