Responsive IFrame: iframe scales, not the game.

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:

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

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?!


Sign In or Register to comment.