I posted a game on my blogger blog, using a post to make an iframe presentation.
Code:
<iframe frameborder="0" height="1000"name="ballswar" scrolling="no"
src="https://ballswargame53.bitballoon.com/index.html"width="980"><p>
Your browser does not support iframes.</p>
></iframe>
And that black strip of the following image is appearing above and below the presentation. How do you remove it or decrease its width?
Image: 
This is because the page used in the iframe fits in size based on an approximate 4: 3 ~ 16: 9 measurement (based on the monito), when it opens directly, the browser will use the approximate media of the screen and still have a discount on the operating system's taskbar and taskbar (like Windows).
Then try to make the adjustment as the site prefers, the height less than the width, change to this:
<iframe frameborder="0" width="980" height="551" name="ballswar" scrolling="no" src="https://ballswargame53.bitballoon.com/index.html"><p>Yourbrowserdoesnotsupportiframes.</p></iframe>NotethatIusedthe link tool to calculate the ratio based on 16: 9, but you can use other measures, this it was just an example, what really matters is to leave the width width="" always greater than height height=""
This black border occurs because the game is centered on the screen both vertically and horizontally and it maintains a fixed aspect ratio between width and height. Leftovers in width or height appear in the shape of this black border.
Resizing is done via javascript.
So this code should give you the dimension you want:
<iframe frameborder="0" height="500" width="890" name="ballswar" scrolling="no"
src="https://ballswargame53.bitballoon.com/index.html">
<p>Your browser does not support iframes.</p>
</iframe>
Use border="0px" in your code.
<iframe frameborder="0" border="0px" height="1000"name="ballswar" scrolling="no"
src="https://ballswargame53.bitballoon.com/index.html"width="980"><p>
Your browser does not support iframes.</p>
></iframe>
or
Change the background of the iframe, seven to the default color of your blog.
<iframe id="SEUID" src="SEULINK" style="background-color: #f000000;" />
Change the iframe background, seven to the default color of your blog.
<iframe id="SEUID" src="SEULINK" style="background-color: #f000000;" />
I recommend looking for the size on the official website to assign width/height its iframe it automatically gets right, you can put it if you want the link of the various games, that my opinion is better to do this DOM Expert. (Study DOM Intermediate).
Demo: link
Follow the code below (costly to do DOM rss):
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script><iframename="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>
This address https://crossorigin.me/ is a CORS, in case the site security is denied to download the code to deliver AJAX and should use CORS is the FACT. Find out about CORS ( link )
use background-color transparent and border 0