How do I embed an iframe ?

[padmanabh-g]

I am trying to embed an iframe on a page. Generally, markdown supports the inline HTML. This used to work in my other projects.

When I added the code below, nothing of it gets displayed on the page. Any content below this iframe is also not seen.

<div style="position: relative;padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden;">
  <iframe src="https://example.com" width="480" height="320" style="border:1px solid #EEE; background:white; position: absolute; top:0;left: 0; width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe>
</div>

[danielfdickinson]

Did you really mean "height: 0;" on the div? Especially with "overflow: hidden;" that would prevent the iframe from being displayed.

[padmanabh-g]

Sorry! I had just copy-pasted the previous working code from the old project.

Just tried removing all the div's as well as iframe's styling, it still not showing up.

<div>
  <iframe src="https://padmanabhgalgali.substack.com/embed" width="480" height="320" frameborder="0" scrolling="no"></iframe>
</div>

[danielfdickinson]

Hmmm....two thoughts. Was there JavaScript that modified the styles? Or have you also changed version of Hugo? Older versions of Hugo used Blackfriday; newer versions use Goldmark which defaults to not allowing raw HTML in Markdown.

[padmanabh-g]

Was there JavaScript that modified the styles?

I've not added any custom css or js.

Older versions of Hugo used Blackfriday; newer versions use Goldmark which defaults to not allowing raw HTML in Markdown.

This could be the issue. Let me try to check and override it if that's the case, and also update it here.

Thanks a lot. Didn't know about this.

[padmanabh-g]

**{{< rawhtml >}}**
  <div>
    <iframe src="https://example.com/embed" width="480" height="320" frameborder="0" scrolling="no"></iframe>
  </div>
**{{< /rawhtml >}}**

Need to use {{ <rawhtml > }} shortcode provided by hugo to embed an iframe.

[danielfdickinson]

Thank you for posting. I missed when the rawhtml shortcode was added. That certainly makes things easier.