How to embed Youtube Video in Hugo Static Website

This tutorial describes how to embed youtube videos in hugo.

My website is using Hugo to generate static content so I had the same query when i wanted to embed youtube in my post

1.Embed Youtube video in Hugo using shortcodes

To embed Youtube video you must use following snippet in your markdown files

{{< youtube id=“your youtube video id” >}}

2.Embed Youtube video in Hugo using html

You can use below html to embed youtube video.

Just add your youtube id in place of youtubeid

iframe src=“https://www.youtube.com/embed/youtubeid"

1
2
3

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="https://www.youtube.com/embed/your%20youtube%20video%20id" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
</div>

Example:

I used to id=“MukpMinSUmo” in the above snippet to display as shown below