# How to create a clean iframe

**URL:** https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753
**Category:** Beginners
**Created:** [November 25, 2021, 11:36am UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753 "2021-11-25T11:36:45Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![sansonsan](https://avatars.discourse-cdn.com/v4/letter/s/439d5e/32.png) [@sansonsan](https://discourse.processing.org/u/sansonsan)
#### Post date: [November 25, 2021, 11:36am UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/1 "2021-11-25T11:36:45Z")

</div>

Hello,

I made a small code with p5js and I want to insert it with an iframe on my webpage.

`<iframe frameborder="0"style="height: 300px; width: 300px; margin: 0 auto; display: block;" src="https://editor.p5js.org/sanson01/embed/HkHdFYAsm"></iframe>`

But it has a header and scroll bar and I don’t know how to delete them.  
Here is a screen with my iframe  
 ![Screenshot_1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4a9f9bbe0dd8a2b534c5e66e2b062be40dd6ac1d.jpeg)

Any idea?

Thank you!  
Santiago

---

<div class="post-metadata">

### Author: ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [November 25, 2021, 9:27pm UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/2 "2021-11-25T21:27:09Z")

</div>

[OpenProcessing.org](http://OpenProcessing.org) still supports banner-less embeds:

https://openprocessing.org/sketch/1174015/embed/?plusEmbedHash=YzM5OTdkYjY1YWQ0NGI3ZDk3MWMwMGI0ZjY1MDMzOTY3YzVkNTZiMTMxNGNhZjYwYjRiMDQxY2I2ZGIwZjhiNTc0MjM1ZDFhM2M2MWQwY2Y0MDRmMWIyN2ZlMDIxMDI0ZDg5NTBmNWM3MDY4YTM5ZGE5YTJkZjIyMGJmNjE0NGNNTE9naDlsYVRlQVdWVDk2ZmdqSTJUbHRlazhQNnArT2FHY3JnRWdtQ1JUV0RVSHEwVVZIK2I5TldzZUpEZlhJcEx1U1ZmdzRuQVdyZkViajJtOXhiZz09&plusEmbedFullscreen=true

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [November 25, 2021, 9:34pm UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/3 "2021-11-25T21:34:31Z")

</div>

> [@sansonsan](#):
>
> Any idea?

Can’t you just have the sketch in your own webpage?

Just have a file named “sketch.js” for your code and these 2 `<script>` tags inside your HTML file:

```auto
<script async src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

```

---

<div class="post-metadata">

### Author: ![sansonsan](https://avatars.discourse-cdn.com/v4/letter/s/439d5e/32.png) [@sansonsan](https://discourse.processing.org/u/sansonsan)
#### Post date: [November 27, 2021, 10:15pm UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/4 "2021-11-27T22:15:27Z")

</div>

I think they only do this if you pay, right?

![imagen](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/16b65e9e75ee31a8ea05279ebe59b3be0f79d1c6.png)

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [November 27, 2021, 10:18pm UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/5 "2021-11-27T22:18:18Z")

</div>

> [@sansonsan](#):
>
> if you pay, right?

Seems it was so for a time. But now share embeds have been re-activated for non-paid users too. 😉

---

<div class="post-metadata">

### Author: ![sansonsan](https://avatars.discourse-cdn.com/v4/letter/s/439d5e/32.png) [@sansonsan](https://discourse.processing.org/u/sansonsan)
#### Post date: [November 27, 2021, 10:25pm UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/6 "2021-11-27T22:25:35Z")

</div>

I don’t see it. When I try to use [OpenProcessing.org](http://OpenProcessing.org) and enbeds my code it appears with banner and everything.  
And the option to edit the embed code is only for Plus+ member (paying for it)  
Or I didn’t find the option that you said.  
Thanks

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [November 27, 2021, 10:35pm UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/7 "2021-11-27T22:35:53Z")

</div>

> [@sansonsan](#):
>
> And the option to edit the embed code is only for Plus+ member…

There’s an [OpenProcessing.org](http://OpenProcessing.org) forum embed `<iframe>` example in the post below:

> [@Processing web sketch embeds on this forum](https://discourse.processing.org/t/processing-web-sketch-embeds-on-this-forum/19097):
>
> Discourse has the ability to whitelist embedded iframes from select hosts. We could use this to enable embedding web-hosted Processing / p5.js sketches from community-trusted platforms such as the p5.js web editor, or [openprocessing.org](http://openprocessing.org), et cetera. An embed from [editor.p5js.org](http://editor.p5js.org): \<iframe src="https://editor.p5js.org/jeremydouglass/sketches/C8iRfwjx-" width="100%" height="510" allowfullscreen frameborder="0" marginwidth="0" marginheight="0"\>\</iframe\> An embed from [openprocessing.org](http://openprocessing.org) \<iframe…

---

<div class="post-metadata">

### Author: ![sansonsan](https://avatars.discourse-cdn.com/v4/letter/s/439d5e/32.png) [@sansonsan](https://discourse.processing.org/u/sansonsan)
#### Post date: [November 28, 2021, 5:34pm UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/8 "2021-11-28T17:34:14Z")

</div>

Yes, thanks for your reply. I know that you can embed and iframe from OpenProcessing or P5js, but I don’t know how this example could help me.  
Because what I want to do deletes all the information (banners, etc.) of my iframe, and all the examples on that reply have banners and thinks. So I don’t understand how it could be possible with OpenProcessing, P5 or any other.

If I try to use P5 I have this banner  
 ![imagen](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4c176193396f439f582fdef94a71aa6a80e45f10.png)

---

<div class="post-metadata">

### Author: ![sansonsan](https://avatars.discourse-cdn.com/v4/letter/s/439d5e/32.png) [@sansonsan](https://discourse.processing.org/u/sansonsan)
#### Post date: [November 28, 2021, 5:34pm UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/9 "2021-11-28T17:34:59Z")

</div>

And if I try to use OpenProcessing I have this one  
 ![imagen](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/27cd15070954a033cc2c4385f498c5879acbc5ce.png)

And I don’t have any free option on these pages to delete that and I don’t know if I can do that in my iframe code (and if I can do that).

---

<div class="post-metadata">

### Author: ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)
#### Post date: [November 29, 2021, 12:39am UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/10 "2021-11-29T00:39:12Z")

</div>

Sorry I didn’t realize these were paid features (I have a paid account, so I have access to them).

As GoToLoop suggests, I recommend hosting your sketch on your own website (if you don’t have an existing host you can use GitHub Pages quite easily).

---

<div class="post-metadata">

### Author: ![sansonsan](https://avatars.discourse-cdn.com/v4/letter/s/439d5e/32.png) [@sansonsan](https://discourse.processing.org/u/sansonsan)
#### Post date: [November 29, 2021, 6:13pm UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/11 "2021-11-29T18:13:41Z")

</div>

Thanks again,

I created a Github project and I could embed an ifame from that.  
It was a problem to do that at the beginning because I am using Google Pages and I can’t modify the code, I can only insert elements and modify them, but it worked to create a Github Page and create a clean iframe from this.

🙂

---

<div class="post-metadata">

### Author: ![CaseyJ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/caseyj/32/15118_2.png) [@CaseyJ](https://discourse.processing.org/u/CaseyJ)
#### Post date: [August 27, 2022, 6:40pm UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/12 "2022-08-27T18:40:03Z")

</div>

How do you put this code in full context?

Here is what I have. The only issue is that I do not know how to set the HTML width to 100% and 400px high. Currently it will load but displays way off the page. Trying to do a Hello World for a responsive sketch.

What I am putting in the code block on Squarespace:

```auto
<body>
<div width="200" height="200">
  
<script async src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=https://www.mywebsite123.com/s/sketch.js></script>

</div>
</body>

```

And what is in the .js file

```auto
function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(220);
  ellipse(windowWidth/2, 100, 50, 50);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

```

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [August 29, 2022, 8:38am UTC](https://discourse.processing.org/t/how-to-create-a-clean-iframe/33753/13 "2022-08-29T08:38:55Z")

</div>

> [@CaseyJ](#):
>
> Trying to do a Hello World for a responsive sketch.

The topic here is more about embedding a remote [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) to some webpage.

Anyways, [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) elements aren’t displayable.  
So it doesn’t make much difference where we place them.

Besides, a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) isn’t a valid parent for [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) elements, b/c the former isn’t a [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#phrasing_content) but a [flow](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#flow_content) 1.

Instead you should chain-call method [**parent()**](https://p5js.org/reference/#/p5.Element/parent) right after [**createCanvas()**](https://p5js.org/reference/#/p5/createCanvas) in order to control where the sketch’s [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) is located:

```auto
createCanvas(800, 600).parent('YourDivId');

```