Embedding a Scratch 3.0 project into webpage without border, control elements, etc.

frodewin

In the best tradition of this thread I tried to embed a Scratch 3.0 project into a webpage without the controls. I scaled up the project to 640x480 on purpose, ending up with this code:

<html>
<head>
<style>
html, body {
    border: 0px;
    margin: 0px;
    padding: 0px;
}
</style>
</head>
<body>
<center>
<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>
</center>
</body>
</html>

Here is also a JSFiddle with the example.

* First, since this is definitely not the most elegant way, I'm welcoming improved versions
* Second, any idea how to get the project to autostart?

frodewin

Does someone know a way how to add autostart?

axisjack

I think you would need some js for the autostart function.

birbilis

UPDATE: sorry, just noticed they said “without control elements”

this works for me:

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

Last edited by birbilis (June 6, 2019 08:27:50)

Locness

birbilis wrote:
UPDATE: sorry, just noticed they said “without control elements”

this works for me:

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

All currently used browsers support iframes. You don't need a fallback.

Locness

One thing that would be possible would be to use a fork of scratch-gui or scratch-www modified, but that would be hard.
Or only scratch-render.

Last edited by Locness (June 6, 2019 13:14:46)

The-Cyber-Wolf

You can do it by <iframe src="https://scratch.mit.edu/projects/ID OF PROJECT/embed“ allowtransparency=”true“ width=”485“ height=”402“ frameborder=”0“ scrolling=”no" allowfullscreen></iframe>

TurtleLegos

The-Cyber-Wolf wrote:
You can do it by <iframe src="https://scratch.mit.edu/projects/ID OF PROJECT/embed“ allowtransparency=”true“ width=”485“ height=”402“ frameborder=”0“ scrolling=”no" allowfullscreen></iframe>

I doubt they still need help now.

ISTILLMAKESTUFF

Forkforus uses this:
<iframe src="https://forkphorus.github.io/embed.html?id=673905954&auto-start=true&light-content=false“ width=”482“ height=”393“ allowfullscreen=”true“ allowtransparency=”true“ style=”border:none;"></iframe>

9gr

ISTILLMAKESTUFF wrote:
Forkforus uses this:
<iframe src="https://forkphorus.github.io/embed.html?id=673905954&auto-start=true&light-content=false“ width=”482“ height=”393“ allowfullscreen=”true“ allowtransparency=”true“ style=”border:none;"></iframe>

Please don't Necropost

Discuss Scratch