How to create a clean iframe

p5.js Beginners
1

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

Any idea?

Thank you!
Santiago

2

OpenProcessing.org still supports banner-less embeds:

2 Likes
3

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:

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

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

imagen

5

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

6

I don’t see it. When I try to use 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

7

There’s an OpenProcessing.org forum embed <iframe> example in the post below:

8

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

9

And if I try to use OpenProcessing I have this one
imagen

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

10

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

1 Like
11

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.

:slight_smile:

1 Like
12

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:

<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

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

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

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

The topic here is more about embedding a remote <iframe> to some webpage.

Anyways, <script> elements aren’t displayable.
So it doesn’t make much difference where we place them.

Besides, a <div> isn’t a valid parent for <script> elements, b/c the former isn’t a phrasing content but a flow 1.

Instead you should chain-call method parent() right after createCanvas() in order to control where the sketch’s <canvas> is located:

createCanvas(800, 600).parent('YourDivId');
1 Like