Embed a scratch 3.0 project

water36040

@programming_god OMG YOU ARE THE MOST EPIC PERSON OMG I REALLY NEEDED THIS YOU ARE SO AWESOME THANK YOU SO MUCH TOOOOO KINDD!!!!!!!

Omega_Wolf04

Programming

Programing_God wrote:
I have found the solution after hours of trying; this works with the latest version of Scratch, Scratch 3.0.

Step 1:
Go to the project page of your game; look at it's URL, and add embed to the end of it (e.g. https://scratch.mit.edu/projects/276955447/ changes to https://scratch.mit.edu/projects/276955447/).

Step 2:
Hopefully, your website editor or maker allows you to upload html to it – if not, you are out of luck. Copy this iframe:

<iframe allowtransparency=“true” width=“485” height=“402” src=“link goes here” frameborder=“0” allowfullscreen></iframe>

Remember that link you just made in Step 1? Replace the “link goes here” portion with that link (e.g. <iframe allowtransparency=“true” width=“485” height=“402” src="https://scratch.mit.edu/projects/276955447/embed“ frameborder=”0" allowfullscreen></iframe>).

Step 3:
Load your website. Your Scratch 3.0 game should be working (e.g. https://Poppo-The-Bird–mushakushi.repl.co)!

Note: Since Scratch 3.0 is rather new – and buggy at times – you may have to refresh your page a couple of times before it works.
Did you know that the example link is a legitimate game? Go check it here (it's the least you can do….)!

I hope this helps!

EDIT: This has been tested to work with repl.it and Notepad. Although I can not guarantee it will work for everything, it should work for most other platforms – save for mobile. If this solution does not work, check out the other posts that comment on this issue!

Yo this worked so well for this computer coding competition I'm doing! Thank you so much!

dillonbarnes

You can also use Phosphorus to embed Scratch projects and then they will run on tablets and phones instead of just computers.

The link for Phosphorus is here:

https://phosphorus.github.io/

Creator of:
Mobile-Friendly Studio
Coolest Scratch Projects studio
micro:bit Studio
New Scratchers studio
Please join to help others!
dillonbarnes

frodewin

dillonbarnes wrote:
You can also use Phosphorus to embed Scratch projects and then they will run on tablets and phones instead of just computers.

The link for Phosphorus is here:

https://phosphorus.github.io/

Phosphorus and Sulfurous both only work with projects that were made in Scratch 2.0.

For Sulfurous an update for supporting Scratch 3.0 projects will come in July this year.

You can also find my best projects here or stop at my profile and say hi!

gamesmakr412

DancingLine wrote:
Finally, after a few days of searching. I finally found the embed link in GitHub from this https://github.com/LLK/scratch-www/issues/1661

The code is this:
<!DOCTYPE html><html><head><title>Embed</title></head><body> <iframe allowtransparency=“true” width=“485” height=“402” src=“//scratch.mit.edu/projects/embed/<INSERT PROJECT ID HERE>/?autostart=false” frameborder=“0” allowfullscreen></iframe></body></html>

For example the code is like this for Google Sites
<!DOCTYPE html><html><head><title>Embed</title></head><body> <iframe allowtransparency=“true” width=“485” height=“402” src=“//scratch.mit.edu/projects/embed/199839521/?autostart=false” frameborder=“0” allowfullscreen></iframe></body></html>

I hope this works, *sigh*

In Google Sites you just have to insert the link of the project (like this: https://scratch.mit.edu/projects/embed/277512620/). You can't insert an Scratch project in Google Sites without typing “/embed” in it, else you even can't insert it.

~ gamesmakr412

Check out my site!

Disclaimer
I am not responsible for problems with the site or complaints.

Privacy Statue (NL)
I'm following the privacy statue of the Netherlands. I'm also not rensponsible for privacy issues in other countries.

pomob

Programing_God wrote:
I have found the solution after hours of trying; this works with the latest version of Scratch, Scratch 3.0.

Step 1:
Go to the project page of your game; look at it's URL, and add embed to the end of it (e.g. https://scratch.mit.edu/projects/276955447/ changes to https://scratch.mit.edu/projects/276955447/).

Step 2:
Hopefully, your website editor or maker allows you to upload html to it – if not, you are out of luck. Copy this iframe:

<iframe allowtransparency=“true” width=“485” height=“402” src=“link goes here” frameborder=“0” allowfullscreen></iframe>

Remember that link you just made in Step 1? Replace the “link goes here” portion with that link (e.g. <iframe allowtransparency=“true” width=“485” height=“402” src="https://scratch.mit.edu/projects/276955447/embed“ frameborder=”0" allowfullscreen></iframe>).

Step 3:
Load your website. Your Scratch 3.0 game should be working (e.g. https://Poppo-The-Bird–mushakushi.repl.co)!

Note: Since Scratch 3.0 is rather new – and buggy at times – you may have to refresh your page a couple of times before it works.
Did you know that the example link is a legitimate game? Go check it here (it's the least you can do….)!

I hope this helps!

EDIT: This has been tested to work with repl.it and Notepad. Although I can not guarantee it will work for everything, it should work for most other platforms – save for mobile. If this solution does not work, check out the other posts that comment on this issue!

Thank u so much

!

when green flag clicked
if <programming god is awesome> then
::custom(this should appear)
end

pomob

oops sorry last should be

::custom this should appear

pomob

i just cannot get it right!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

smrman

Update:

A proper way to embed Scratch 3.0 projects is on the way.
I translated the few needed string needed for that in my native language a couple of days ago.

I don't have an ETA tho…

gamereric21

if you click the copy link button, an embed code will appear underneath, press copy code and paste it into your site

hi-cow

gamereric21 wrote:
if you click the copy link button, an embed code will appear underneath, press copy code and paste it into your site

The copy link button is just below the notes and credits area.

Last edited by hi-cow (May 21, 2019 21:39:41)

birbilis

make sure you use ASCII double-quote character, not those special ones that sometimes replace it in text editors

this worked for me, copy from here:

<iframe
allowtransparency=“true”
width=“100%”
height=“100%”
src="https://scratch.mit.edu/projects/276955447/embed/?autostart=true“
frameborder=”0"
allowfullscreen
>
Please use a web browser that supports IFRAMEs
</iframe>

has anyone implemented autostart? it seems to not use it (or at least anymore in Scratch 3)

WABScratchTeam

frodewin-test wrote:
This code
<div style="overflow: hidden; height: 480px; width: 640px;" >
    <iframe style="margin-top:-50px; margin-left:-11px;" scrolling="no" allowtransparency="false" width="658" height="536" bgcolor=#220000 src="https://scratch.mit.edu/projects/284133924/embed/" allowfullscreen></iframe>
    <br/><br/>
</div>
should do the trick. Replace “284133924” with your project's number.

I don't know how to add autostart though (see my other post)

Thanks, works a treat.

IndigoCoke390

This is really easy,
step 1. go to your project (must be published)
step 2. click on copy link
stop 3. copy the embed code

easy have fun, it worked for me

frodewin

Does anybody have an idea how to enable autostart?

You can also find my best projects here or stop at my profile and say hi!

Sheep_maker

If there was autostart, audio may not play immediately until the user interacts with the page (eg by clicking or tapping on the page) because browsers don't like web pages nonconsensually playing audio or a video right when the page loads.

- Sheep_maker This is a kumquat-free signature. :P
This is my signature. It appears below all my posts. Discuss it on my profile, not the forums. Here's how to make your own.
.postsignature { overflow: auto; } .scratchblocks { overflow-x: auto; overflow-y: hidden; }

Maximouse

This is true, but Forkphorus (fork of Phosphorus supporting 3.0 projects) suppords embedding projects with autostart, for example:

<script src="https://forkphorus.github.io/embed.js?id=117910858&ui=false"></script>

EDIT: It doesn't seem to work?

Last edited by Maximouse (July 20, 2019 15:47:21)

This is Maximouse's signature. Learn more about signatures.

FlossGirl101

IndigoCoke390 wrote:
This is really easy,
step 1. go to your project (must be published)
step 2. click on copy link
stop 3. copy the embed code

easy have fun, it worked for me

wait wut? where is the embed code?

Ur mum

Sheep_maker

FlossGirl101 wrote:
IndigoCoke390 wrote:
This is really easy,
step 1. go to your project (must be published)
step 2. click on copy link
stop 3. copy the embed code

easy have fun, it worked for me

wait wut? where is the embed code?

Click on the “Copy embed” button (the code is also in the blue box)

- Sheep_maker This is a kumquat-free signature. :P
This is my signature. It appears below all my posts. Discuss it on my profile, not the forums. Here's how to make your own.
.postsignature { overflow: auto; } .scratchblocks { overflow-x: auto; overflow-y: hidden; }

Wolfmaster30306

go to here
https://pastebin.com/DDcn5TbX

replace the yoururlhere with project number

This is Wolfmaster signing off. Find me here-https://wolfmaster30306.carrd.co

Discuss Scratch