How to embed DTube videos on a Hugo website

Originally published at marvinschopf.com.

Hugo is a fast and easy-to-use generator for static web pages, DTube is a decentralised video streaming platform based on the Avalon blockchain, but originally launched on the Steem blockchain. Users are rewarded in the cryptocurrency DTC (DTube Coin) for activities on the platform.

Hugo already comes with a number of so-called shortcodes, for example to easily embed YouTube videos.

So in this post we will now look at how to develop your own reusable shortcode for embedding DTube videos.

Table of Contents

1. Introduction to Hugo shortcodes
2. Creating your own shortcodes
3. DTube shortcode
4. Full example

Introduction to Hugo shortcodes

Hugo shortcodes allow frequently used, complex HTML snippets to be put into simple template files. For example, a YouTube video can simply be embedded with the following shortcode instead of the actual iFrame code:

# Example

{{< youtube dQw4w9WgXcQ >}}

This shortcode is then replaced in Hugo's build process by the YouTube embed iFrame, so that the embedded YouTube video then appears on the web page.

Creating your own shortcodes

Hugo searches for custom shortcodes in the following locations:

1. /layouts/shortcodes/<SHORTCODE>.html
2. /themes/<THEME>/layouts/shortcodes/<SHORTCODE>.html

The first place is for when you want to add the shortcode to your project, the second place is for when you create a theme and want to include your custom shortcode with it.

The name of the shortcode file is later also the name used to use the shortcode in a page.

The format of the shortcode is simply an HTML file that may contain some special parameters, such as the arguments like the ID of the video to be embedded. Of course, you can also use all the features of the Hugo/Go templating system.

DTube shortcode

The normal iFrame embed code of a DTube video looks like this:

<div
    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
    <iframe
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
        src="https://emb.d.tube/#!/<USERNAME>/<VIDEO ID>"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
    ></iframe>
</div>

Notice that two parameters (as opposed to the one - the video ID - on YouTube) are required, the username of the channel and the video ID. So our shortcode now also has to accept two parameters instead of one like the YouTube shortcode.

So all we really need to do is put this HTML code into a shortcode file and pass the arguments/parameters (username and video ID) to the iFrame.

Arguments are passed to the shortcode in the .Params array, so to get the first argument we have to use the following code:

{{ index .Params 0 }}

So our shortcode should now look like this:

<div
    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
    <iframe
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
        src="https://emb.d.tube/#!/{{ index .Params 0 }}/{{ index .Params 1 }}"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
    ></iframe>
</div>

We now save this file at layouts/shortcodes/dtube.html.

That's it! We can now use the shortcode {{</* dtube USERNAME VIDEO_ID */>}} at any point on our page and the DTube video will be embedded at that point.

Full example

layouts/shortcodes/dtube.html

<div
    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
    <iframe
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
        src="https://emb.d.tube/#!/{{ index .Params 0 }}/{{ index .Params 1 }}"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
    ></iframe>
</div>