Insert video with hugo shortcode

Thu, 16 Feb 2023 00:00:00 +0000

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.

Shortcode on Raveen Kumar

Insert video with hugo shortcode