Insert video with hugo shortcode
https://dev.to/hi_artem/add-a-video-to-your-hugo-website-104
To create a new shortcode, place its template in the layouts/shortcodes. In my case, I created the following template at layouts/shortcodes/video.html
<div class="container">
<div id="player-wrapper" class="{{ .Get 1 }}"></div>
</div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"
>
</script>
<script>
var playerElement = document.getElementById("player-wrapper");
var player = new Clappr.Player({
source: {{ .Get 0 }},
mute: true,
height: 360,
width: 640
});
player.attachTo(playerElement);
</script>
Now, I can create a new Markdown document, and use the newly created shorthand. Two arguments has to be provided: link to the video, and CSS class to apply to the container wrapping the video element.
---
title: 'Hello Video'
date: 2020-09-20T19:02:50-07:00
draft: false
---
## Look what I can do!
{{/*< video "http://clappr.io/highline.mp4" "my-5" >*/}}