Add audio and video embedding guide to audio-video.md

Author: adityatelange

content/posts/audio-video.md

@@ -0,0 +1,56 @@
+---
+title: "Audio and Video"
+date: 2026-04-11
+description: "Learn how to embed audio and video in your hugo site using shortcodes and HTML."
+tags: ["hugo", "audio", "video", "shortcodes", "HTML"]
+---
+
+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:
+
+```markdown
+{{/*< audio src="/path/to/your/audiofile.mp3" >*/}}
+```
+
+{{< audio src="https://upload.wikimedia.org/wikipedia/commons/5/55/Apollo_8_liftoff.ogg" caption="Apollo 8 liftoff.ogg" >}}
+
+
+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:
+
+```html
+<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:
+
+```markdown
+{{/*< video src="/path/to/your/videofile.mp4" >*/}}
+```
+
+{{< video src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Apollo_4_separation_of_interstage_ring.webm" >}}
+
+
+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:
+
+```html
+<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.