Iframe not displaying in second_post.md

support
1

New user.
I have read some of the docs.
I have searched the forum or “iframe”. My problem seems similar to others but nevertheless I can make no progress.

I have an existing website that shows graphs of electricity prices and tables of data created using python and Holoviz Panel.
I wish to use an iframe to link to that site from a Hugo post or actually a page would be better. So far I am a complete space cadet for Hugo.

The page code is:

+++

title = 'My Second Post'

date = 2023-10-08T15:09:57+11:00

draft = true

+++

<iframe width="85%" height="2400" src="http://www.example_web_site.com" frameborder="0" style="border:0" allowfullscreen ></iframe>

Here is some more text

Visit the [Hugo](https://gohugo.io) website!

The page displays the text but the iframe tag is ignored.
I know the iframe tag is valid because I included it in a simple .html file and ran that in a browser window.

My basic firstwesite made from Hugo is running locally as advertised.

The directory structure is:
QuickStart -
content
posts
my-first-post copy.md
my-first-post.md

Any help appreciated but sorry for wasting time.

2

Do you see any HTML comments when you view the page Source in your browser?

3

As Joe suggested, if you see <!-- raw HTML omitted --> in your source code, add the code below in your config file

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

But instead of doing that, I would recommend using a shortcode instead. Something like this—
layouts/shortcodes/iframe.html

<iframe width="{{ .Get "width" }}" height="{{ .Get "height" }}" src="{{ .Get "src" }}" frameborder="{{ .Get "frameborder"}}" style="{{ .Get "style"}}" allowfullscreen></iframe>

Then in your content—

{{< iframe width="85%" height="2400" src="https://www.example.com" frameborder="0" style="border:0" >}}
4

Joe Mooring and Arif,
Thank you.

The config file changes work, however the Iframe width is limited likely by some interaction with the theme

I was unable to make the shortcode approach improve over setting the renderer unsafe value. In fact I ran into some double quote mark issues with suggest iframe.html code.

I have one more ask and then I will work it out myself and that is how do I over ride a theme width CSS? Nearly all of the themes I have looked at restrict my iframe output to their container and that typically is only about 60% of my screen width.

I’d like my iframe to take up the entire available width when displayed. I’ve spent hours playing with the many wonderful themes that have been developed but very few of them provide any documentation about how to alter basic properties.

I guess the easiest way is to create a page from scratch that just has a flag set to completely ignore all theme css?

Since my original problem is solved, thanks very much,I’'ll tick the solution

5

you copy the theme’s CSS file to the same directory path in the root layouts folder and edit it from there.

6

Or I suppose I can write a short code template that positions an iframe. Thanks.

So far it’s more work than I expected and I’m not really comfortable having to modify someone else’s theme and learn Hugo.python and its many user friendly libraries seemed easier.

Still I may persist. Thanks again

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.