How to integrate YouTube videos into Hugo blog postings

Posted by ads on Friday, 2024-02-09
Posted in [Online][Schönebeck-Elbe][Software]

Sometimes you want to integrate a YouTube video into your blog posting. There are several ways how to do this in Hugo.

In this blog posting I’m using a posting about “Hochwasser an der Elbe in Schönebeck” (“Flooding on the Elbe in Schönebeck”) by Pascal. He recently created a video about high waters which hit parts of Germany over Christmas 2023 and January 2024. This specific video is made in Schönebeck (Elbe) which is - as the name implies - at the river Elbe.

He integrated the video into a short blog posting, and over time iterated through the different options how to integrate the video into the posting.

The easiest way is certainly to just use a link to the video, and let the user decide if they want to click on it.

[Link to the YouTube Video](https://youtu.be/jGBl7D3D1So)

The result looks like this:

Link to the YouTube Video

Not bad, but no visual effects at all. The reader doesn’t know much about the video, and there is no preview.

Hugo is using Markdown for the content. In Markdown, one can create links, and can include images. Both have a slightly different syntax.

Here is the syntax for a link:

[This is the text description for the link](this is the link to the video)

If you know HTML, this will end up as the following HTML snipped:

1
<a href="this is the link to the video">This is the text description for the link</a>

And here is the syntax for an image:

![Alt text for the image](link to the image)

The HTML snippet will look like:

1
<img src="link to the image" alt="Alt text for the image" />

These two options can be stacked:

[![Flooding on the Elbe in Schönebeck](https://i3.ytimg.com/vi/jGBl7D3D1So/maxresdefault.jpg)](https://youtu.be/jGBl7D3D1So)

Note that I’m using the existing preview image provided by YouTube. That is easy to do, if you have the video id.

The result:

Flooding on the Elbe in Schönebeck

That’s already pretty good, it gives the reader a preview what to expect. However it is not a typical embedded video, and the image has no visual indication that one can click on it and will see a video. Markdown allows an additional image description, which is shown under the text. This can be used here:

[![Flooding on the Elbe in Schönebeck](https://i3.ytimg.com/vi/jGBl7D3D1So/maxresdefault.jpg "Video: Flooding on the Elbe in Schönebeck (click on image)")](https://youtu.be/jGBl7D3D1So)

The result:

Flooding on the Elbe in Schönebeck
Video: Flooding on the Elbe in Schönebeck (click on image)

In any case I still need to include the video id twice, once for the preview image (https://i3.ytimg.com/vi/jGBl7D3D1So/maxresdefault.jpg), once for the video (https://youtu.be/jGBl7D3D1So). That is a potential source for problems if the content is copied later, and used in another post. I’d like to avoid that.

Option 3: Hugo Shortcode for embedded videos

Hugo comes with a number of integrated shortcodes.

A shortcode is a, well, as the name implies a code for including a specific file or functionality. One can write their own shortcode, or use one of the integrated ones. There is figure, which allows more control over the placing of images. There’s vimeo for including Vimeo videos. And of course the one for YouTube videos.

All you need is the video id, that is the part after the v=. Then embed the video:

1
{{< youtube jGBl7D3D1So >}}

The result:

The video can be autostarted:

1
{{< youtube id="jGBl7D3D1So" autoplay="true" >}}

Note that you need to use id= for the id, the shortcode can’t mix named and unnamed parameters. I’m skipping the example, for obvious reasons.

And a title helps with a better description, especially useful for screen reader software.

1
{{< youtube id="jGBl7D3D1So" title="Flooding on the Elbe in Schönebeck" >}}

The result:

That looks nice!

Bottom line

It’s easy to integrate external videos in Hugo. The blog software comes with existing shortcodes for the integration.

What is Hugo

Hugo is a popular and open source static website generator. This blog is created using Hugo.

Development started around 2013, and the software is written in Go. The content of the website is written in Markdown, and then compiled into a website using the pre-defined layout. During development of new content, Hugo offers a life preview using the built-in server. It is very flexible, and offers a wide range of available themes and shortcuts.


Categories: [Online] [Schönebeck-Elbe] [Software]

Share: