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