Scaling an iframe on window resize
I'm trying to scale an iframe based on the window size. Coming through the iframe is a html5 game at 1600px x 900px
I have used the script below to scale the game, so I know that much can be done. While the code below renders the game into a small box, is there any way I can have it scale to fit the window, while maintaining the 16:9 aspect ratio?
<head>
<style type="text/css">
.tab{
position:relative;
width:265px;170px;
}
.tab iframe{
position:relative;
-webkit-transform: scale(0.3, 0.29);
-moz-transform: scale(0.3, 0.29);
transform: scale(0.3, 0.29);
-moz-transform-origin:0 0;
-webkit-transform-origin:0 0;
transform-origin:0 0;
position:relative;
z-index:90;
}
</style>
</head>
<body>
<div id="tab0" class="tab">
<iframe src="game.html" width="1600" height="900" scrolling="no"></iframe>
</div>
</body>
For reference I am a game artist and have only used code(javascript/css/html) for quest dialogues and other smaller game features. I'm currently the last one working on the project and it was requested this feature be implemented to the game.
Any help will be appreciated!
Answer
I'd do it like this, using jQuery
$(document).ready(function(){
$('iframe').attr('width',$(window).width());
$('iframe').attr('height',($('iframe').attr('width') * (9/16)));
})
Note: this doesn't make the iframe 1600 pixels wide, it simply makes it the full width, and makes the height = to the width multiplied by 9/16 ie: maintains a 16:9 aspect ratio.