0

Eu postei um jogo em meu blog do blogger, usando uma postagem para fazer uma apresentação por iframe.

Código:

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

E está aparecendo essa faixa preta da imagem a seguir, em cima e em baixo da apresentação. Como retira-la ou diminuir a largura dela?

imagem: faixa em cima e em baixo

4
  • Pode postar o código ? 4/08/2016 às 19:37
  • Esse aqui: <iframe frameborder="0" height="1000" name="ballswar" scrolling="no" src="ballswargame53.bitballoon.com/index.html" width="980"><p> Your browser does not support iframes.</p> ></iframe> 4/08/2016 às 19:45
  • Entendi e retirar fundo preto, um problema do objeto iframe é externo do site bitballoon, mas acho tá modificar propriedade iframe é complicado mexer mais DOM. Caso preto é um site bitballon esta com fundo preto com responsivo do site.
    – KingRider
    4/08/2016 às 19:55
  • E substituir height="1000" para height="550", e vou estudar DOM Iframe te passo.
    – KingRider
    4/08/2016 às 20:02

6 Respostas 6

2

Isto ocorre porque a página usada no iframe se ajusta ao tamanho se baseando em uma medida aproximada ao 4:3 ~ 16:9 (baseado no monito), quando abre diretamenta, o navegador usará as mediadas aproximadas da tela e ainda terá um desconto dos toolbars e taskbar do sistema operacional (como Windows).

Então procure fazer o ajuste como o site prefere, a altura menor que a largura, mude para isto:

<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 que eu usei a ferramenta http://size43.com/jqueryVideoTool.html pra calcular o ratio baseado em 16:9, mas você pode usar outras medidas, isso foi apenas um exemplo, o que importa mesmo é deixar a largura width="" sempre maior que a altura height=""

2

Esta borda preta ocorre porque o jogo está centralizado na tela tanto na vertical quanto na horizontal e ele mantém uma taxa de aspecto fixa entre a largura e a altura. As sobras na largura ou na altura aparecem na forma dessa borda preta.

O redimensionamento é feito via javascript.

Assim sendo, esse código deve dar a dimensão que você quer:

<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>
3
  • foi o mesmo que eu respondi :)
    – Reptile
    4/08/2016 às 20:11
  • 1
    @GuilhermeNascimento É, mas você foi mais rápido que eu por 3 minutos. 4/08/2016 às 20:39
  • Pois é XD ... +1 ae na sua resposta também :)
    – Reptile
    4/08/2016 às 20:39
1

Utilize border="0px" no seu codigo.

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

ou

Altere o background do iframe, sete para a cor padrão do seu blog.

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

Altere o background do iframe, sete para a cor padrão do seu blog.

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

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)

-1

utilize background-color transparent e border 0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .