How to Embed Scratch Projects to Your Websites

 Scratch projects are awesome, but sometimes you want to share the goodness outside of the scratch website, or make a website to show off all your projects. In this post I'll be showing you just how to do that.

For the first step all you have to do is find a project you like, and then in the bottom right there should be a button that says Copy Link.

Then you'll find a link and embed code.

You'll want to copy that so you can use it on your page. After that, you can go to whatever text editor or website builder you use and paste in that line of code. It should look something like this:

<iframe src="https://scratch.mit.edu/projects/your-projectID/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>

Now you can save it and the project will show up on your page!

If you haven't used html like this before, what it does is uses the <iframe> tag. That will tell html to pull some data from Scratch and display it on your page. You can use the same html tag for almost any website, as long as it allows embedding. Try this code out on another website that you like to go to:

<iframe src="https://yoururlhere/"></iframe>

If that didn't work, it might mean that the website does not allow embeds. Test it out on multiple websites if it doesn't work the first time.

You can also experiment with the code to make cool stuff! Lets go back to our code from Scratch.

 

<iframe src="https://scratch.mit.edu/projects/your-projectID/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>

You can edit any of this code except for

<iframe src= and </iframe>

or it will stop working.

I'll try changing the width and height,

As you can see it will change the height and width of the iframe.

Just don't set the values that high or you'll break your site like I did 😬

Well that's how to use iframes and embed your Scratch projects in just a few easy steps.

If your interested in html here's some good sources you can use to learn.

https://www.codecademy.com/learn/learn-html

https://www.w3schools.com/

If this helped, be sure to share this with your friends and stay tuned for future tutorials.