Logo
  • Features
  • Educators
  • What's New
  • Blog
  • Showcase
  • About us
  • Contact
Try it now!
How to make your HTML Embed better?
🖼️

How to make your HTML Embed better?

✍️
This guide is created by fath11 from Gandi IDE community.
image

fath11 YouTube channel: https://www.youtube.com/@fath11encoded/featured

fath11 Cocrea: https://cocrea.world/@Fath11

fath11 Scratch account: https://scratch.mit.edu/users/fath11/

I have seen enough lousy embeds that I made this doc, if you follow me correctly, your embed will look something like this:

image

A nice cinematic embed that fits perfectly with Gandi IDE screen resolution.

Steps 1 to 4 will be how to download the HTML embed for your Gandi game, if you already know how to do it, you can skip step 5.

I also have some extra tips for you that you can check out here.

So without further ado, let's start!

Step 1

image

Open your project page and click the share button below your project, as shown by the red arrow.

Step 2

image

This popup will appear, click on the Embed Button.

Step 3

image

Then click on the stage card.

Step 4

image

A download HTML file button will appear, click on it. It is also fine if you want to hide the title and creator.

Step 5

image

Open the file manager and right-click on your HTML file. Then click open with, and Visual Studio Code. If you don’t have VSCode, you can use Notepad (any version is fine).

Step 6

image

After that, you need to look for this specific line on line 27 as shown above.

Step 7

image

Change 800px to 1330px, and 506px to 690px. CTRL/Cmd + S to save and close VSCode.

Step 8

Open itch.io and create a new project. Make sure you give the project a title and look for this drop-down.

image

Change it to HTML.

image

Step 9

Scroll down and look for Embed options.

image

Change 640px to 1330px, and 360px to 690px as shown below.

image

Step 10

Upload your HTML file.

image

If you have multiple files, tick “This file will be played in the browser” at the file you want to be played in the browser.

image

The End

And that is it! It just takes a few more efforts, but the result will be amazing!

image

A nice clean silk game page will not only make your player's eye more comfortable but also could increase your player's impressions.

I also prepare some tips that you can follow below.

Bye bye!

Extra Tips

1. Don't tick the fullscreen button

image

There is a HUGE difference between itch.io fullscreen, and Gandi IDE built-in fullscreen, you can see it here:

itch.io:

Gandi ide:

image
image

2. Don’t turn on automatically run on fullscreen!

image

When the game is run, itch.io will automatically run on fullscreen and you will get that ugly fullscreen

image

Instead, just leave it on Embed in the page setting

image

3. Add Screenshots and a cover image

You are encouraged to add screenshots and a cover image. It could make your game stand out and also give your player an idea of what the game is about.

image

On your game page, you can set the screenshots layout to a sidebar

image

4. Add a background and customize your game page

image

As you can see, you can make your game page looks A LOT nicer.

That is all the tips I got for you, now you can stop being this person

image

And be a much better person

image

I wish you luck on your game jam, I’ll see you later, bye-bye!

💡
If you have any questions or suggestions, you can find us in the discord channel: https://discord.gg/U3nyveCvRa
Logo

Designed by 2ndR with love

Discord