Recomendo de buscar o tamanho no site oficial para atribuir width/height
o seu iframe
faz automaticamente fica certinho, pode colocar se quiser o link do vários jogos, essa minha opinião é melhor de fazer isso DOM Expert. (Estude DOM intermediário).
Demo:
http://codepen.io/KingRider/pen/rLqyrA
Segue o código debaixo (custa caro de fazer DOM rss):
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<iframe name="ballswar" src width height scrolling="no" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
<script>
$(document).ready(function() {
var cors = "https://crossorigin.me/";
var jogo = "http://ballswargame53.bitballoon.com/index.html";
$.ajax({
url: cors+jogo,
type: "GET",
dataType: "Html",
success: function(obj) {
objtemp = $.parseHTML(obj);
$("iframe[name=ballswar]")
.attr('src', jogo)
.attr('width', $(objtemp).find('canvas')[0].width)
.attr('height', $(objtemp).find('canvas')[0].height)
}
});
});
</script>
</html>
Este o endereço https://crossorigin.me/
é um CORS, caso a segurança do site está negado para baixar o código de entregar AJAX e deve usar CORS é o FATO. Segue entender sobre CORS (https://stackoverflow.com/questions/22083453/console-errors-failed-to-load-resource-neterr-insecure-response/36086326#36086326)
height="1000"
paraheight="550"
, e vou estudar DOM Iframe te passo.