# Is it possible to show p5js program in Google Sites web site?

**URL:** <https://discourse.processing.org/t/is-it-possible-to-show-p5js-program-in-google-sites-web-site/23620>\
**Category:** Coding Questions\
**Created:** [September 1, 2020, 11:29pm UTC](https://discourse.processing.org/t/is-it-possible-to-show-p5js-program-in-google-sites-web-site/23620 "2020-09-01T23:29:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kkchau](https://avatars.discourse-cdn.com/v4/letter/k/ac8455/32.png) [@kkchau](https://discourse.processing.org/u/kkchau)\
**Post date:** [September 1, 2020, 11:29pm UTC](https://discourse.processing.org/t/is-it-possible-to-show-p5js-program-in-google-sites-web-site/23620/1 "2020-09-01T23:29:59Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

I have a web page that is build by google sites, and i want to show some p5js program graphic in it.

i have seen people discuss to use iframe to do so, but i only use google drive so is it possible some how to add the p5js graphic to the google sites page?

Thank you

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [September 2, 2020, 12:37am UTC](https://discourse.processing.org/t/is-it-possible-to-show-p5js-program-in-google-sites-web-site/23620/2 "2020-09-02T00:37:16Z")

</div>

Hi @kkchau! It’s definitely possible using the [p5.js Editor](https://editor.p5js.org). Here’s one way to do it.

## Step 1. Create a sketch

 ![1-sketch](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2370761af1828a4d4d4d5e78b758dc2335eed6c9.png)

## Step 2. Share the sketch

 ![2-share](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4ddb35c50add0850d28dc749087a0aafefbcb0fb.png)

## Step 3. Copy the embed code

 ![3-embed](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/755539f8207dcac3bead89fdd9c04d74232d94b5.png)

## Step 4. Paste the embed code in your Google Site

 ![4-paste](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d69f0ede20ca76149dd5ce1d6243809f0b3688b3.jpeg)

## Step 5. Insert with correct dimensions

 ![5-insert](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d67380143857fe0672bc9fa88d27f85fe81a0df0.jpeg)  
 ![5b-insert-button](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d011acdd0229aec5f36385e981e6ee058421333a.jpeg)

## Step 6. Tweak

 ![6-tweak](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fdd75ec5ac85c5bbc913ee3a8fcc8c0a0b8de0de.jpeg)

## Step 7. Profit

 ![7-profit](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d1fb4b3d132abe5360bb78685240d45489fd5bd4.jpeg)

---

<div class="post-metadata">

**Author:** ![kkchau](https://avatars.discourse-cdn.com/v4/letter/k/ac8455/32.png) [@kkchau](https://discourse.processing.org/u/kkchau)\
**Post date:** [September 2, 2020, 1:00am UTC](https://discourse.processing.org/t/is-it-possible-to-show-p5js-program-in-google-sites-web-site/23620/3 "2020-09-02T01:00:35Z")

</div>

Thanks for the information! This opens my eyes to look at p5js in a next level,  
but there is one problem, i had a 1200x200 frame, but i cant do step 7 right , it always shows the left corner of it. Can you also help me with that?

the link is:

https://editor.p5js.org/kkchau6/embed/UvFlerWDP

[https://editor.p5js.org/kkchau6/present/UvFlerWDP](https://editor.p5js.org/kkchau6/present/UvFlerWDP)

Thank you

---

<div class="post-metadata">

**Author:** ![kkchau](https://avatars.discourse-cdn.com/v4/letter/k/ac8455/32.png) [@kkchau](https://discourse.processing.org/u/kkchau)\
**Post date:** [September 2, 2020, 1:03am UTC](https://discourse.processing.org/t/is-it-possible-to-show-p5js-program-in-google-sites-web-site/23620/4 "2020-09-02T01:03:09Z")

</div>

I got the answer by changing the size of the iframe , i am cool now! Thank you

https://editor.p5js.org/kkchau6/embed/UvFlerWDP

---

<div class="post-metadata">

**Author:** ![kkchau](https://avatars.discourse-cdn.com/v4/letter/k/ac8455/32.png) [@kkchau](https://discourse.processing.org/u/kkchau)\
**Post date:** [September 2, 2020, 1:10am UTC](https://discourse.processing.org/t/is-it-possible-to-show-p5js-program-in-google-sites-web-site/23620/5 "2020-09-02T01:10:10Z")

</div>

Wait, i have a real problem, is it possible that i scale the canvas size according with the size of the iframe, or dynamically with the size of the web page? there is a problem with the size different when i view it on the computer and the phone.

it was ok to have 800x200 on computer, and when i see it on phone, it only got a corner, i doesn’t make sense.

---

<div class="post-metadata">

**Author:** ![kkchau](https://avatars.discourse-cdn.com/v4/letter/k/ac8455/32.png) [@kkchau](https://discourse.processing.org/u/kkchau)\
**Post date:** [September 2, 2020, 8:11am UTC](https://discourse.processing.org/t/is-it-possible-to-show-p5js-program-in-google-sites-web-site/23620/6 "2020-09-02T08:11:15Z")

</div>

with setting the canvas size to “windowWidth, windowHeight”  
and windowResized to “windowWidth, windowHeight”

and in the iframe, to width="100%"and height=“100%”

i have solve the problem.

Thank you

---

<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:** [September 2, 2020, 3:23pm UTC](https://discourse.processing.org/t/is-it-possible-to-show-p5js-program-in-google-sites-web-site/23620/7 "2020-09-02T15:23:13Z")

</div>

Some util functions about auto-resizing:

> **[windowResized()](https://Gist.GitHub.com/GoToLoop/54b4c49e9c2541da2d91692bf0c01192)**
>
> windowResized(). GitHub Gist: instantly share code, notes, and snippets.

  

> **[Expands Current iFrame Element to Fit Body's Size](https://Gist.GitHub.com/GoToLoop/9eeb3ea918e9e149ba3c6c717cfb16e1)**
>
> Expands Current iFrame Element to Fit Body's Size. GitHub Gist: instantly share code, notes, and snippets.