Embedding Iframe in Hugo Site

user_2843275 0
Viewed 1860

and pardon what might be a repeat question, the solutions to the others didn't solve my problem. I'm working on a Hugo site and attempting to embed an iframe. The element shows but the I get the message 'This content is blocked. Contact the site owner to fix the issue.' when it loads, so no one can see the content.

Here is my .md information

+++
title = "Resources"
description = "Hugo, the world's fastest framework for building websites"
date = "2019-02-28"
aliases = ["about-us", "about-hugo", "contact"]
author = "Hugo Authors"
+++
<iframe src="//docs.google.com/spreadsheets...."></iframe>

I've also updated my config.toml file by adding the following:

[markup.goldmark.renderer]
 unsafe = true

I'm not sure what I'm missing. Please let me know if you need more information about what I've done. I've tried shortcode as well but that doesn't render anything at all (I'm still new to shortcodes which is why I am embedding the iframe).

Thank you for your time and consideration.

hugo iframe
1 Answers

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 }}.

user_83497690
Related