GameSalad

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:

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

Comments

  • The_Gamesalad_GuruThe_Gamesalad_Guru Posts: 9,826Member

    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.

Sign In or Register to comment.