Iframe an HTML in a post

1

I have a hugo post with the following front matter and content

---
title : "Hello World"
summary : "Simple program"
url : "program/helloworld"
--- 
<iframe width="100%" height="150" name="iframe" src="dashboard.html"></iframe>

The requirement is to render the HTML file as an iframe, and this is not for one post but for many posts, and the HTML file to render in the post will vary depending on the post. For example, it will be similar to the below front matter and content for another post,

---
title : "Hello Calc"
summary : "Simple program"
url : "program/calc"
--- 
<iframe width="100%" height="150" name="iframe" src="operations.html"></iframe>

The location of the HTML file to iframe is located at myblog/content/posts/helloworld/dashboard.html. The problem is, the HTML file is not rendered in the post.

2

structure

content
└── posts
    └── helloworld
        ├── dashboard.html
        └── index.md

content/posts/helloworld/index.md

+++
title = "Helloworld"
date = 2021-03-11T21:43:30-08:00
draft = false
url = "program/helloworld"
+++
<iframe width="100%" height="150" name="iframe" src="dashboard.html"></iframe>

content/posts/helloworld/dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0">
  <title>Dashboard</title>
</head>
<body>
  <p>This is content/posts/helloworld/dashboard.html.</p>
</body>
</html>

config.toml

[markup.goldmark.renderer]
unsafe = true
3

Is it possible to edit the width? The width is inheriting the parent CSS
.post-content iframe {
max-width:100%
}
It is not rendering the entire content width wise.How can I edit the CSS so that it renders the entire width

4

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