|
This article is a stub. It may be incomplete, unfinished, or have missing parts/sections. If the article can be expanded, please do so! There may be suggestions on its talk page. (May 2019) |
|
This article has links to websites or programs outside of Scratch and Wikipedia. Remember to stay safe while using the internet, as we cannot guarantee the safety of other websites. |
- This article or section documents the current version of Scratch (version 3.0). For this article in Scratch 2.0, see How to Embed a Project (2.0). For this article in Scratch 1.4, see Embedding Projects (1.4).
To view and play Scratch projects on outside websites, you can embed the project with the following steps:
- Click "copy link" in the bottom right of the project pane.
- A dialog will appear, with two boxes and two links.
- Click the "copy embed" link.
- Paste this code in the HTML editor where it needs to go.
Uses
Embedding projects can be used to share projects made in Scratch to other websites as well as one's own. Along with embedding, one can share links on Facebook or Twitter (also known as X) directly from the project page. Embedding projects could also be used to share projects onto itch.io for a game jam.
Cloud Data
Embedded projects can still use the cloud data functionalities only if the viewer of the embedded project is logged in to Scratch on their web browser. Users not logged in to Scratch while viewing an embedded project will not save cloud data to Scratch servers.
Example of Use
Step 1:- Open Notepad or any other text editor or HTML editor and type the following (Note: this does nothing but change the words displayed in the tab in the browser window):
<html>
<head>
<title> Embedding Scratch Projects (Test) </title>
</head>
</html>Step 2:- Now save it as a .html file If you open this file in a web browser, you will see that a blank webpage will appear with the tab name 'Embedding Scratch Projects (Test)
Step 3:- Now open this in Notepad and add this code to the document to make the body of the webpage:-
<html>
<head>
<title> Embedding Scratch Projects (Test) </title>
</head>
<body>
</body>
</html>Step 4:- Paste the embed between <body> and </body> like so:-
<iframe src="https://scratch.mit.edu/projects/164932339/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
</body>Step 5:- Now save it and open it in a web browser. You can now see the project in the webpage.
Step 6 (Optional):- You can now go to https://www.w3schools.com/html/ to learn more about how you can make this better!
Results
You can copy this code in the notepad, save it as an html file and see the power of HTML embedding.
<html>
<head>
<title> Embedding Scratch Projects (Test) </title>
</head>
<body>
<h1> The Pong Game </h1>
<iframe src="https://scratch.mit.edu/projects/164932339/embed" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></iframe>
<h2> By purplejane </h2>
</body>
</html>