For those who just want to embed an iframe
into a Hugo site, like the question title says:
In the examples below, the content between ---
is called front matter and it is in YAML syntax. You can add here your own structured data or use predefined Hugo's front matter fields. The rest of the file (below the second ---
) is a standard Markdown syntax formatted content.
You don't need to use the YAML syntax in your front matter. Also TOML and JSON formats are supported by Hugo (see docs)
Solution 1: direct HTML in the content
You can add the HTML code itself to the Markdown content (like T.J.'s .md file example in the question). Hugo's markdown engine will then render the iframe
as it is.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
<iframe src="https://example.com/"></iframe>
Solution 2: custom shortcode
You can implement your own shortcode which can be useful when using some kind of CMS or in a case when you want to style the iframe somehow.
<!-- layouts/shortcodes/iframe.html -->
<iframe src="{{ .Get 0 }}"></iframe>
You can then add iframes to your content in markdown files like this:
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
{{< iframe https://example.com/ >}}
Shortcodes allow you also to create named attributes so you would use the shortcode like {{< iframe url="https://example.com/" >}}
. The benefit of this solution is that you are free to set up the HTML code that will be rendered when using the iframe shortcode. For more information, see the shortcode docs.
Solution 3: using the front matter
If you build your page from predefined blocks or components or the page is a very simple one where you for example don't use the markdown content but just the front matter fields, you can be interested in this solution which is basically just using the front matter for storing the iframe
's URL or other settings you want to use during the HTML rendering.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
iframe: "https://example.com/"
---
In your layout file, you will get this piece of information by using {{ .Params.iframe }}
.