How To: Make HTML5 games work in a div container
When creating a HTML5 game you want it to use as much screen space as possible. In most cases that is the window size.
But what if you want to embed your HTML5 game into another page? Usually you would want to use a frame to do so. That way the game recognizes the size of the frame as the actual window size. This works great, but unfortunately sometimes using a frame is not an option you have.
Suddenly you are in all sorts of troubles. If the game is embedded in a div container, the expected behaviour is not to “grow out” of that container. However, the most common game engines don’t expect a simple parent container. Instead they watch for the window.innerHeight or window.innerWidth values. This causes the game to overlap other elements on the page.
Unfortunately there is no such thing as a single way to fix this behaviour for all HTML5 games, as the solution depends on what game engine is used and of course on your own code. You have to investigate yourself, if your engine of choice is capable of fitting the game render to the size of the parent element instead of the window size.
However, we included the “softgames.embedGame: true/false” variable to the Softgames API that will let the game know, if it is embedded. This way the game is able to choose the correct behaviour.
If “softgames.embedGame” is true the game has to render to the parent element, otherwise the normal scaling can be used. To test this behaviour, we set up this simple site. DOWNLOAD
Furthermore you may find our blog post about scaling HTML5 games (LINK) helpful too: