Tips for Embedding Your Game to Your Website like Youtube Video

[RyanBram]

How to Embed Your Game like Youtube

Screenshot​

This tips was written when I was trying to put my translated game SRPG_Engine, online.

Hello all.
As we all know, RPG Maker MV is HTML5 based, therefore it can be played on any platform that supports HTML5. However, even though it can be played on any platform, it does not mean we can simply put the game on the website without adjusting it. Because it will give bad impression from your audience about your game.

Actually, you can just put it to dedicated game website, such as itch.io, etc. But how if you want to show the game as your portfolio? Or if you just made several progress and want to show to your audience or supporter how far your game progressed? Of course using your home page is the best place to present it.

In this thread I want to give you tips about how to embed your RPG Maker MV game into your personal site just like Youtube video.

This is the preparation that you should do:
1. Deploy your project by choosing a web platform. Use the encryption feature if you want to provide little protection for your game assets.

Spoiler: Screenshot

2. Check the deployment folder and make sure there are no files left. Use the Firefox browser to open your index.html for offline test whether your game and its features function perfectly if run inside web browser.

Spoiler: Screenshot

3. Upload your game to your personal server. If you don't have it yet, you can use the github.io page to host your game.

After all of above step is complete, the next step is how you embed the uploaded game, so that it can be played on your personal page just like you embed videos from Youtube. You can try to embed my game https://ryanbram.github.io/srpg_online to your homepage for testing purpose.

First,
we need to add a mechanism to make your game don't run automatically when user open your homepage or your post. Because we don't want to load tons of game assets into user computer without user concern. They will getting mad to you if they find their browser suddenly unresponsive, or their internet connection become slower, or your game title BGM suddenly starts to play.

Go to your homepage. And enter the following code into your personal page post:

<iframe id="gameFrame" allowfullscreen="true" scrolling="no" height="312" width="555" sandbox="allow-same-origin allow-scripts" src=""></iframe>
<input onclick="gameFrame.src='https://ryanbram.github.io/srpg_online'; gameFrame.focus();" type="button" value="Play Game" /> <input onclick="gameFrame.src='';" type="button" value="Stop" /> Press "F4" to go Fullscreen

Replace https://ryanbram.github.io/srpg_online with the URL of your game. The screenshot on topmost of this post is how it will look in your personal page:

Second,
you need to ensure your game fit the browser window. Because, without plugin, MV cannot resize your game automatically to fit browser window without you manually press F3.
Here is the plugin: Download ...
,and this is the option that you should set for the plugin.

Spoiler: Screenshot

Actually you have to put this plugin since the first step before game deployment, but I put it here because I want to ensure even the beginner know basic things about web deployment. Okay, please repeat the 1st step until 3rd with this plugin already activated in your game project.

For another special tips:
Use this plugin, so can prepare only ogg musics, without need to including any m4a musics in your game, therefore your game size will become much more compact, this plugin also has feature to improve your game audio performance.


If you done with all of the steps above, you can view your page and see your game already there.

Good luck. (^_^)