Scratch Project Embed CSS Trick

Thepuzzlegame

PinballX wrote:
<iframe allowtransparency=“true” width=“485” height=“402” src="http://scratch.mit.edu/projects/embed/29416872/?autostart=false“ frameborder=”0" allowfullscreen></iframe>

You can't embed projects in forum posts

goldfish678

Thepuzzlegame wrote:
PinballX wrote:
<iframe allowtransparency=“true” width=“485” height=“402” src="http://scratch.mit.edu/projects/embed/29416872/?autostart=false“ frameborder=”0" allowfullscreen></iframe>
You can't embed projects in forum posts

Though that would be awesome.

Thepuzzlegame

goldfish678 wrote:
Thepuzzlegame wrote:
PinballX wrote:
<iframe allowtransparency=“true” width=“485” height=“402” src="http://scratch.mit.edu/projects/embed/29416872/?autostart=false“ frameborder=”0" allowfullscreen></iframe>
You can't embed projects in forum posts
Though that would be awesome.

Agreed

legoman1616

MegaApuTurkUltra

legoman1616 wrote:
<iframe allowtransparency=“true” width=“485” height=“402” src="http://scratch.mit.edu/projects/embed/30446252/?autostart=false“ frameborder=”0" allowfullscreen></iframe>

PLEASE ENABLE MINE PLS

regards legoman1616

You don't have to “enable” anything. Just use the template (in the OP):

<div style="overflow-y: hidden; height: 372px;" id="applet">
    <iframe style="margin-top:-38px;" allowtransparency="true" width="485" height="402" src="http://scratch.mit.edu/projects/embed/YOUR PROJECT ID HERE/?autostart=true" frameborder="0" allowfullscreen></iframe>
    <br/><br/>
</div>

The put in your project ID. (It's the number in your project URL, in this case 30446252)

Also I recommend not using all caps BECAUSE IT'S REALLY ANNOYING TO SOME PEOPLE LIKE ME.

Last edited by MegaApuTurkUltra (Oct. 20, 2014 13:27:11)

Firedrake969

On the second example/whatever, why keep its id of applet when it doesn't need an ID?

MegaApuTurkUltra

Firedrake969 wrote:
On the second example/whatever, why keep its id of applet when it doesn't need an ID?

Idk, probably @scratchisthebest had it on a website or something and just copied the HTML.

Last edited by MegaApuTurkUltra (Oct. 20, 2014 21:19:28)

call-me

iTweak0r wrote:
I found out that using some clever JavaScript and CSS, you can make the top bar with the Green Flag and Stop Sign disappear on an embedded project.

Here's the code, using my project “Flyer 4.1”:
<div style="overflow-y: hidden; height: 372px;" id="applet">
    <iframe allowtransparency="true" width="485" height="402" src="http://scratch.mit.edu/projects/embed/2801222/?autostart=true" frameborder="0" allowfullscreen></iframe>
    <br/><br/>
</div>
<script>
    var objDiv = document.getElementById("applet");
    objDiv.scrollTop = 38;
</script>

This is awesome

BigBlueBlock

Would the ST allow this?

GRA0007

BigBlueBlock wrote:
Would the ST allow this?

I don't see why not, we're not hiding a Scratch logo or anything…

SEC9_NINJA

why not <iframe allowtransparency=“true” width=“485” height=“402” src="http://scratch.mit.edu/projects/embed/28494606/?autostart=false“ frameborder=”0" allowfullscreen></iframe>

PullJosh

SEC9_NINJA wrote:
why not <iframe allowtransparency=“true” width=“485” height=“402” src="http://scratch.mit.edu/projects/embed/28494606/?autostart=false“ frameborder=”0" allowfullscreen></iframe>

Because that completely defeats the purpose of hiding the top bar.

JamesOuO

Could somebody make some HTML that magnifies the game screen by x2? I've tried to get it to work perfectly (I want no distortions at all, game is exactly x2) with no good solution.

Thanks!

goldfish678

JamesOuO wrote:
Could somebody make some HTML that magnifies the game screen by x2? I've tried to get it to work perfectly (I want no distortions at all, game is exactly x2) with no good solution.

Thanks!

Have you tried multiplying both the width and height parameters by 2 and inputting your answers in the corresponding spots to do this?

frodewin

JamesOuO wrote:
Could somebody make some HTML that magnifies the game screen by x2? I've tried to get it to work perfectly (I want no distortions at all, game is exactly x2) with no good solution.

Thanks!

Here you go:

<div style="overflow-y: hidden; height: 720px; overflow-x: hidden; width: 960px;" id="applet">
    <iframe style="margin-top:-70px; margin-left:-12px;" allowtransparency="false" width="980" height="820" bgcolor=#F11111 src="http://scratch.mit.edu/projects/embed/30014850/?autostart=true" allowfullscreen></iframe>
    <br/><br/>
</div>

The proportions are exactly 960 x 720, so double the size of a scratch project. Just exchange the number (“30014850”) with the one of your project.
A vector graphics project shall display fine.

__init__

Thepuzzlegame wrote:
goldfish678 wrote:
Thepuzzlegame wrote:
PinballX wrote:
<iframe allowtransparency=“true” width=“485” height=“402” src="http://scratch.mit.edu/projects/embed/29416872/?autostart=false“ frameborder=”0" allowfullscreen></iframe>
You can't embed projects in forum posts
Though that would be awesome.
Agreed

+1

abdullahi125

Thepuzzlegame

abdullahi125 wrote:
<iframe allowtransparency=“true” width=“485” height=“402” src="http://scratch.mit.edu/projects/embed/35534058/?autostart=false“ frameborder=”0" allowfullscreen></iframe>

Please don't necropost. Also you can't embed projects in forum posts.

woodroe99

endrock401

Discuss Scratch