How to remove this black border in this presentation by iframe?

Asked

Viewed 3,210 times

0

I posted a game on my blogger blog, using a post to make a presentation by iframe.

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 this black band is appearing from the image below, above and below the presentation. How to remove it or decrease its width?

image: faixa em cima e em baixo

html iframe blogger

  • You can post the code ?

  • This one: <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>

  • Understood and remove black background, an iframe object problem is external bitballoon site, but I think modify iframe property is complicated to move more DOM. Black case is a bitballon site this with black background with responsive site.

  • And replace height="1000" for height="550", and I’ll study DOM Iframe.

6 answers

2


This is because the page used in iframe fits the size based on a measure approximated to 4:3 ~ 16:9 (based on monite), when it opens directly, the browser will use the approximate screen medias and still have a discount of the operating system toolbars 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>Your browser does not support iframes.</p>
</iframe>

Note that I used the tool http://size43.com/jqueryVideoTool.html to calculate the ratio based on 16:9, but you can use other measures, this was just an example, what really matters is to leave the width width="" always bigger than the height height=""

2

This black edge 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.

Therefore, this code should give 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>

  • was the same as I replied :)

  • 1

    @Guilhermenascimento Yes, but you were faster than me for 3 minutes.

  • For it is XD ... +1 ae in your answer too :)

1

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 your iframe, seven to the default color of your blog. 

<iframe id="SEUID" src="SEULINK" style="background-color: #f000000;" />

0

Change the background of your iframe, seven to the default color of your blog.

<iframe id="SEUID" src="SEULINK" style="background-color: #f000000;" />

0

Recommend to search the size on the official website to assign width/height your iframe makes automatically gets straight, can put if you want the link of various games, this my opinion is better to do this DOM Expert. (Study Intermediate DOM).

Demo: http://codepen.io/KingRider/pen/rLqyrA

Follows the code below (it costs expensive to make 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>

This is the address https://crossorigin.me/ is a CORS, if the security of the site is denied to download the AJAX deliver code and must use CORS is the FACT. Follow understand about CORS (https://stackoverflow.com/questions/22083453/console-errors-failed-to-load-resource-neterr-insecure-response/36086326#36086326)

-1

use background-color Transparent and border 0

Browser other questions tagged html iframe blogger

You are not signed in. Login or sign up in order to post.