Responsive IFrame: iframe scales, not the game.

Odingraphics

Hey Guys,

I am embedding the iframe on my website for my game, but can't make the actual game scale with the iframe.
At the moment it stays in place, and the iframe around it scales.

Here's the link to the page:

http://yellowbellybeer.ie/game/

Here's my code:

.scalable{overflow:hidden}.scalable iframe{height:100%;left:0;position:absolute;top:0;width:100%}.scalable .scalable-content{height:0;position:relative}.scalable-16-9 .scalable-content{padding-bottom:56.25%}

Demo: Responsive iframe with aspect ratio preserved

Return to article

I had created a new div called .scalable.

Here's that CSS code

.scalable {
overflow: hidden;
}

.scalable iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

.scalable .scalable-content {
height: 0;
position: relative;
}

.scalable-16-9 .scalable-content {
/* Percentage from 9 divided by 16 for ratio of 16:9. */
padding-bottom: 56.25%;
}

Any thoughts? Or is the game just fixed and that's it?!

The_Gamesalad_Guru

are you doing an iframe via the arcade or a html 5 publish. For sizing the html 5 publish, look in the index file provided when published. Open it with a text editor. There you will see options for size and cropping options.