Scratch Silicon: Embed Scratch 3 Projects In Your Site

JGames101

The Scratch Embedder is not visible in the Scratch UI (it does exist if you enter /embed at the end of a project url), so I created an embeddable site for Scratch 3 projects. I made something similar a year ago, but it doesn't work anymore and relied on embedding a specific portion of https://llk.github.io/scratch-gui, which now has fullscreen, small stage, and so much more that would mess it up. This new version is a fork of scratch-gui, with all UI elements other than the fullscreen player removed. The player, in fullscreen, adapts to the screensize, so it will work in an iframe of any size. Currently, it functions just like a fullscreen scratch 3 project, but more features will be added in the future.

How-To
In your page, simply add an iframe or object with a source of https://jamesbmadden.github.io/scratch-silicon/#project id
For example, you could add

<iframe src="https://jamesbmadden.github.io/scratch-silicon/#276660763" width="480px" height="480px" allowFullscreen></iframe>

The width and the height can be anything you want, as the page is fully responsive.

Why Use This Over The Official Embeddable Pages?

Scratch's Embed pages can't be used on a mobile device, but Silicon can. That means it works in WebView!
Scratch Silicon Supports Fullscreen (Supported, but In Progress)

Current Issues

Fullscreen Does Not Change the Size of the Stage.

Missing Features
Because Scratch Silicon is a fork of scratch-gui, which does not contain certain features, the following features are unvailable in Scratch Silicon:

Cloud Variables
Cloud variables should not be a huge issue since they are already unavailable to any new scratcher anyway.

Version History

v0.2.1: Viewport meta tag added to work better in WebViews on mobile and Sprites can no longer be dragged
v0.2.0: Test Fullscreen Added
v0.1.0: Initial Test Release

Last edited by JGames101 (Feb. 3, 2019 01:51:07)

Scratch 3 Modding

LuckyLucky7

Why is every sprite draggable no matter what project I view?

I have about 3450 posts, 90 shared projects, 180 total created/followed topics, and 425 followers.

JGames101

LuckyLucky7 wrote:
Why is every sprite draggable no matter what project I view?

That's a bug I noticed a little while ago. I'll add it to the issues list and work on a fix. It's because it's a fork of the editor, and in the editor, every sprite is draggable, and I'm not properly setting fullscreen the way that the buttons would.

Scratch 3 Modding

JGames101

LuckyLucky7 wrote:
Why is every sprite draggable no matter what project I view?

I fixed the issue

Scratch 3 Modding

dillonbarnes

You can also use this website to embed scratch projects
https://phosphorus.github.io/

Last edited by dillonbarnes (Jan. 7, 2019 10:36:34)

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

Sheep_maker

dillonbarnes wrote:
You can also use this website to embed scratch projects
https://phosphorus.github.io/

Won't work with 3.0 projects because it's a 2.0 thing

- 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; }

Wettining

Sheep_maker wrote:
dillonbarnes wrote:
You can also use this website to embed scratch projects
https://phosphorus.github.io/
Won't work with 3.0 projects because it's a 2.0 thing

Would Phosphorus++ work?

Done with Scratch but want a little more? Try GP…
View all my posts:
1GErVELk2hM2WBK3TawRLR7AkV7SxyBSK6

JGames101

Wettining wrote:
Sheep_maker wrote:
dillonbarnes wrote:
You can also use this website to embed scratch projects
https://phosphorus.github.io/
Won't work with 3.0 projects because it's a 2.0 thing
Would Phosphorus++ work?

No, Phosphorus++ still seems to be unable to load Scratch 3 projects.

Scratch 3 Modding

ethajenn

You could almost make a hosting site where you enter project ID, make the specs such as whether the sprites are draggable and such, and make a very basic HTML embed generator. If you put it on a google site or something, the cost would be nothing, just some HTML time.

frodewin

JGames101 wrote:
Wettining wrote:
Sheep_maker wrote:
dillonbarnes wrote:
You can also use this website to embed scratch projects
https://phosphorus.github.io/
Won't work with 3.0 projects because it's a 2.0 thing
Would Phosphorus++ work?
No, Phosphorus++ still seems to be unable to load Scratch 3 projects.

Phosphorus and Sulfurous only work with Scratch 2.0 projects, but projects that have not been changed since the 3.0 transition are still in 2.0 format. So old projects can be embedded with them.

Moreover, I just found out, that it is still possible to make and upload 2.0 projects with the Scratch 2.0 offline editor. A project which I just uploaded loaded and played well in Sulfurous.

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

physix

It doesn't work anymore ?

Varan40

Yes, today it was stop… 404
404 There isn't a GitHub Pages site here
This link is working sometimes: https://jamesbmadden.github.io/scratch-silicon/#283224933 but game from this project dos't work: https://play.google.com/store/apps/details?id=com.wKliker_8473773

JGames101

Varan40 wrote:
Yes, today it was stop… 404
404 There isn't a GitHub Pages site here
This link is working sometimes: https://jamesbmadden.github.io/scratch-silicon/#283224933 but game from this project dos't work: https://play.google.com/store/apps/details?id=com.wKliker_8473773

Replace thejamesbm in your URL with jamesbmadden, and it will work fine. The app uses the old URL.

Last edited by JGames101 (Feb. 3, 2019 18:25:22)

Scratch 3 Modding

pms2010

@JGames101… Thanks for the embed info. I'm a teacher and have spent all day looking for some documentation on how to embed in 3.0. I couldn't find anything. I don't need the speed, just the /embed

tks

Last edited by pms2010 (Feb. 5, 2019 21:17:04)

komakao

The file is located on Scratch official website and embed it as projectID.
Can I upload a Scratch 3.0 file and embed the file?

Last edited by komakao (Feb. 7, 2019 01:33:35)

JGames101

komakao wrote:
The file is located on Scratch official website and embed it as projectID.
Can I upload a Scratch 3.0 file and embed the file?

Not in the current version, but that feature could definitely be implemented. The issue is still allowing you to embed an uploaded file on a page, and how the data would be stored (data URL? Seems like the only real option). I'll work on it.

Last edited by JGames101 (Feb. 9, 2019 00:24:15)

Scratch 3 Modding

komakao

https://llk.github.io/scratch-gui/develop/compatibility-testing.html#201793794
I found this page can embed a project on scratch official site by projectID.
I guess there may be some way to embed a local file by using the lib.min.js but I've got no one to solve it.
https://llk.github.io/scratch-gui/develop/lib.min.js

redware

JGames101 - that is great. On my mobile though it is difficult to press the green button - is there an autostart option ?

http://www.redware.com/scratch-test-01.html

Last edited by redware (Feb. 9, 2019 16:36:53)

MinecraftWin98

Yep, having options for autostart and removing the top bar with the flag and stop icons would be pretty sweet. Nice work!

My name is John, I've been using Scratch since 1.4 was the latest version, and now I'm a college kid studying Electrical Engineering. Even though I am learning much more advanced languages, I still have a lot of fun working with Scratch.

WJEB Radio | JohnOS 9 SP6

makakulka

komakao, thank you very much!!! https://llk.github.io/scratch-gui/develop/compatibility-testing.html#

Discuss Scratch