How to Embed a Responsive HTML5 Game With an Iframe

Embedding an HTML5 game is one of the easiest ways to keep visitors on your site longer. The game runs inside a small frame on your page, and you do not have to host or build anything yourself. The catch is that a badly sized iframe looks broken on phones. This guide shows the basic embed code and the CSS that makes it responsive.

What an iframe embed actually is

An iframe is a window into another web page. When you embed a game, your page loads the game from the provider's server and displays it inside that window. Your visitors play on your page, but the game files stay on the provider's side.

This has two practical benefits. You do not need to store or update game files, and any fixes the provider makes show up on your site automatically.

The basic embed code

Most game providers give you a snippet that looks like this:

• <iframe src="https://example.com/game" width="800" height="450" frameborder="0" allowfullscreen></iframe>

The src is the address of the game, width and height set the size in pixels, and allowfullscreen lets players expand the game to the whole screen. Fixed pixel sizes are fine on a desktop, but on a 360 pixel wide phone an 800 pixel frame will overflow the screen and force sideways scrolling.

Make it responsive with the aspect ratio trick

The fix is to let the container scale with the screen and keep the iframe locked to a fixed shape. Wrap the iframe in a div:

• <div class="game-frame"><iframe src="https://example.com/game" allowfullscreen></iframe></div>

Then add this CSS:

• .game-frame { position: relative; width: 100%; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; }
• .game-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

The aspect-ratio property is supported by all current major browsers. The container fills the available width, never grows past 900 pixels, and always keeps a 16:9 shape. The iframe simply fills it.

Pick the right aspect ratio for the game

Not every game is landscape. A wide ratio on a portrait puzzle game leaves ugly empty bars.

• 16 / 9 suits most landscape arcade, racing, and action games.
• 4 / 3 works for older-style puzzle and card games.
• 9 / 16 fits portrait games designed for phones.

If you embed a mix of games, store the ratio per game and set it as an inline style, for example style="aspect-ratio: 9 / 16; max-width: 420px".

To see the 16:9 frame in action, here are two landscape games from the PlayKovo catalog. Start one, then resize your browser window or rotate your phone: the frame keeps the game's shape instead of overflowing or leaving empty bars.

Try it live · PlayKovo catalog

RacingHexGLDesktopsupportedMobilesupported

Race a hovering ship through a neon-lit futuristic cityscape at breakneck speed, dodging walls and rivals while managing shields and boost across a full 3D WebGL track.

Get embed code Play on PlayKovoLandscape game

.ioBlock BashDesktopsupportedMobilesupported

Eat gold, grow your block head and bash rivals in a wild voxel .io arena, and climb the leaderboard!

Get embed code Play on PlayKovoLandscape game

Add the attributes that matter

A few extra attributes make the embed faster and safer:

• loading="lazy" delays loading the game until the visitor scrolls near it, which helps your page speed.
• title="Game name" gives screen readers a description of the frame.
• allow="fullscreen" is the modern form of the fullscreen permission.
• sandbox restricts what the embedded page can do. If you use it, test the game afterward, because some games need allow-scripts and allow-same-origin to run.

Test it on a real phone

Resize your desktop browser to check the layout, but also open the page on an actual phone. Look for these problems:

• The page scrolls sideways, which means a fixed width is still in play.
• The game responds to touch but the page scrolls instead while you play. Leave some space around the frame so players can scroll past it.
• The fullscreen button does nothing. Some mobile browsers limit fullscreen, so check that the game also looks good unexpanded.

Common mistakes to avoid

• Setting a fixed height only. Always size with width and aspect ratio together.
• Placing several games on one page. Each frame loads a full game, so keep it to one or two per page, or load them on click.
• Forgetting to check the rights. Only embed games where the provider allows it. We cover that in a separate guide on embedding rights and licensing.

Quick recap

Wrap your iframe in a container, give the container aspect-ratio and a max width, make the iframe fill it, and add loading="lazy" and a title. That is enough for a clean, responsive game on every screen size. Looking for games you can embed? Browse the catalog at PlayKovo.