3

Então, estou com um problema um tanto quanto complexo. Sabendo que não é possível estilizar com CSS o conteúdo de um <iframe>, não conheço outra forma de alcançar o objetivo desejado. Até tentei com JavaScript, porém nada funcionou, sendo que alguns testes eu tive o erro CrossOrigin, devido a tentar 'acessar' o conteúdo de uma URL diferente da de origem.

Estou utilizando Google DoubleClick for Business para exibir anúncios em um determinado site. Para quem não sabe o que o DoubleClick é, um AdServer. Ele gera uma tag javascript e o conteúdo resultado na página será um HTML com o que foi definido, neste caso infelizmente ele utiliza iframe, um tanto quanto defasado. O problema é que os anúncios são de tamanhos fixos (eu posso definir). O serviço não tem uma responsividade nativa, ou seja, largura 100% por exemplo. Evitando ter que cadastrar criativos de vários tamanhos diferentes, quero torná-los responsivos, consegui fazer isso com o serviço que utilizo atualmente.

Veja em funcionamento

Tag gerada pelo DFP <head>

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
  <script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
  </script>

  <script>
    googletag.cmd.push(function () {
      googletag.defineSlot('/21690932511/oregionalsul.com/1200x160_featured', [[1200, 160], [970, 90]], 'div-gpt-ad-1521048007443-0').addService(googletag.pubads());
      googletag.pubads().enableSingleRequest();
      googletag.enableServices();
    });
  </script>

Tag <body>

  <!-- /21690932511/oregionalsul.com/1200x160_featured -->
  <div id='div-gpt-ad-1521048007443-0'>
    <script>
      googletag.cmd.push(function () { googletag.display('div-gpt-ad-1521048007443-0'); });
    </script>
  </div>

Resultado esperado

10
  • 1
    Cara o correto não é ter uma peça única com 100% de largura, e sim uma peça para cada formato. Pelo menos de acordo com a documentação... Inclusive fiz uns testes com o seu anuncio e ele funciona no formato [320, 700], [300, 250] por exemplo. Isso deve responder a sua pergunta... support.google.com/dfp_premium/answer/3423562?hl=pt-BR
    – hugocsl
    Commented 20/03/2018 às 18:22
  • Já cheguei a visitar esta documentação, porém várias peças para um anúncio alteram a lógica de mercado aplicada atualmente pela empresa. Por exemplo, os anúncios 800x600 serão sempre desta proporção, e sofrerão redimensionamento (100% largura e altura relativa) de acordo com a resolução. Daí é que está o grande problema, pois o DFP está defasado na questão dessas tags, atualmente com outra empresa funciona dessa forma. Commented 20/03/2018 às 18:25
  • Cara então faz na gambiarra mesmo, transforma a animação em GIF e usa como imagem colocando 100% na largura...
    – hugocsl
    Commented 20/03/2018 às 18:37
  • Eis o problema... Isto é um GIF animado, não é possível colocar 100% de largura pois o <iframe> é gerado pelo script do DFP. Qualquer mudança via CSS não afetará o conteúdo por estar dentro do ìframe` . Fiquei um bom tempo tentando forçar algumas tags, classes e ids com !important mas não tem jeito. Commented 20/03/2018 às 18:39
  • 1
    Fiz uma update na questão, você provavelmente entendeu errado, tenho um GIF do funcionamento atual: g.recordit.co/YPnafaRlGd.gif Seria simples se o DFP permitisse colocar a largura proporcional, a questão é conseguir forçar a injeção do script a isso. Commented 20/03/2018 às 19:14

1 Resposta 1

2
+50

Primeiro adicione no seu CSS:

iframe{
   width: 100% !important;
}

Solução em jQuery usando contents():

$(window).on("load", function(){
   $("iframe").on("load", function(){
      var ads = $(this).contents().find("#aw0 img");
      ads.attr({
         "width": "100%",
         "height": "auto"
      });
   });
});

Veja no JSFiddle

Solução usando JavaScript puro:

window.onload = function(){

   var iframe = document.body.querySelector("iframe");

   iframe.onload = function(){
      var iframeDocument = iframe.contentDocument || iframe.contentWindow.document,
      ads = iframeDocument.body.querySelector("#aw0 img");

      ads.style.cssText = "width: 100%; height: auto;";
   }

}

Veja no JSFiddle

7
  • Já chequei no celular e a princípio está funcionando lindamente. Assim que estiver no computador irei realizar a implantação e caso resolva atribuo como melhor resposta. Agradeço antecipadamente por se dispor a ajudar. Commented 21/03/2018 às 3:01
  • Blz amigo! Boa sorte!
    – Sam
    Commented 21/03/2018 às 3:01
  • Fiz alguns testes, somente em um documento .html localmente não funciona, upando o mesmo para o servidor, sem outros conteúdos juntamente, funciona legal. Agora estou sofrendo um pouco para descobrir se há conflitos ou realmente não funciona em uma página. Veja: vargemdocedro.oregionalsul.com O iframe está responsivo ao que parece, porém o conteúdo não é afetado nesta página. Commented 21/03/2018 às 18:17
  • Vou dar uma olhada...
    – Sam
    Commented 21/03/2018 às 18:54
  • Te uns conflitos na página... dentro do style.css tem uns @import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);... altere para https e veja se http em outros lugares tb e altere
    – Sam
    Commented 21/03/2018 às 19:01

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 .