Discuss Scratch

frodewin
Scratcher
500+ posts

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

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?



You can also find my best projects here or stop at my profile and say hi!
frodewin
Scratcher
500+ posts

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

Does someone know a way how to add autostart?



You can also find my best projects here or stop at my profile and say hi!
axisjack
Scratcher
100+ posts

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

I think you would need some js for the autostart function.
birbilis
Scratcher
80 posts

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

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
Scratcher
100+ posts

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

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
Scratcher
100+ posts

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

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)


Powered by DjangoBB

Standard | Mobile