Quick and dirty method

Hugo’s rendering engine is smart. If you need a quick solution, you can add almost any HTML to your content, and it will render as you expect:

1
2
3
4
5

---
title: "My blog post"
---

<iframe src="example.html"></iframe>

This will render the iframe in place with the default dimensions and might be all you need.

For reference, the default sizing of an iframe is 300 pixels wide by 150 pixels tall.

But we can do better.

The better method

We can utilize shortcodes to accomplish the same thing in a more structured way.

Let’s make a new shortcode file:

1
2

<!-- layouts/shortcodes/embed.html -->
<iframe src="{{ .Get 0 }}" width="{{ .Get 1 }}" height="{{ .Get 2 }}"> </iframe>

Bear in mind the name of the file inside the shortcodes directory dictates the name of the shortcode.

Now we can use this shortcode in any of our markdown content:

1
2
3
4
5

---
title: "My blog post"
---

{{< embed "example.html" "100" "50" >}}

This will render an iframe 100 pixels wide by 50 pixels tall.

Using shortcodes to accomplish this, we have a tidy, consistent and repeatable method of embedding iframes into our content.

Content Security Policy

Depending on your Content Security Policy, you might find that the iframe refuses to load. The header X-Frame-Options controls this. By setting the value to SAMEORIGIN, it will, as the name suggests, allow you to load iframes from the same origin.

If you want to load a resource from an external origin, you will need to modify your Content-Security-Policy header, specifically the frame-ancestors policy. You can read more about that header here.