Audio and Video

In this post, we’ll explore how to embed audio and video content in your Hugo site using both shortcodes and HTML. This allows you to enhance your content with multimedia elements, making it more engaging for your audience.

Embedding Audio

To embed audio in your Hugo site, you can use the built-in audio shortcode. Here’s an example of how to use it:

{{/*< audio src="/path/to/your/audiofile.mp3" >*/}}

Make sure to replace /path/to/your/audiofile.mp3 with the actual path to your audio file. This shortcode will generate an audio player that allows visitors to play the audio directly on your site.

Alternatively, you can also use HTML to embed audio. Here’s how you can do it:

<audio controls>
  <source src="/path/to/your/audiofile.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Again, replace /path/to/your/audiofile.mp3 with the correct path to your audio file. This HTML code will create a similar audio player as the shortcode.

Embedding Video

To embed video content, you can use the video shortcode in Hugo. Here’s an example:

{{/*< video src="/path/to/your/videofile.mp4" >*/}}

Make sure to replace /path/to/your/videofile.mp4 with the actual path to your video file. This shortcode will generate a video player that allows visitors to watch the video directly on your site.

You can also use HTML to embed video content. Here’s how you can do it:

<video controls>
  <source src="/path/to/your/videofile.mp4" type="video/mp4" />
  Your browser does not support the video element.
</video>

Again, replace /path/to/your/videofile.mp4 with the correct path to your video file. This HTML code will create a video player similar to the one generated by the shortcode.