Make iframe content responsive (Google DFP)

Asked

Viewed 549 times

3

So I’m having a rather complex problem. Knowing that it is not possible to style with CSS the content of a <iframe>, I know no other way to achieve the desired goal. I even tried with Javascript, but nothing worked, and some tests I had Crossorigin error, due to trying to 'access' the content of a URL other than the source.

I’m using Google Doubleclick for Business to display ads on a particular site. For those who don’t know what Doubleclick is, an Adserver. It generates a javascript tag and the resulting content on the page will be an HTML with what was defined, in this case unfortunately it uses iframe, somewhat outdated. The problem is that the ads are of fixed sizes (I can set). The service does not have a native responsiveness, ie 100% width for example. Avoiding having to register creative of various different sizes, I want to make them responsive, I managed to do this with the service I currently use.

See in operation

Tag generated by 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>

Expected result

javascript html css google iframe
  • 1

    Expensive is not having a single piece 100% wide, but a piece for each format. At least according to the documentation... I even did some tests with your ad and it works in the format [320, 700], [300, 250] for example. This should answer your question... https://support.google.com/dfp_premium/answer/3423562?hl=pt-BR

  • I have already visited this documentation, but several pieces for an advertisement change the market logic currently applied by the company. For example, 800x600 ads will always be of this ratio, and will resize (100% width and relative height) according to.

  • Cara then does the same trick, transforms the animation into GIF and uses as an image placing 100% in width...

  • Here is the problem... This is an animated GIF, it is not possible to put 100% wide because the <iframe> is generated by the DFP script. Any change via CSS will not affect the content by being inside ìframe. Fiquei um bom tempo tentando forçar algumas tags, classes e ids com!Mportant` but there’s no way.

  • Actually I meant to capture the animation of the iframe and convert it into a Gif, like record the screen and save a Gif and then use it in place of the iframe. In fact you wouldn’t even use the iframe in this case, only the Gif you made from the iframe animation. I don’t know if this option suits you...

  • That’s what you suggested is just putting the gif directly on the page, isn’t it? So I would ignore the DFP and everything would lose its logic, since the goal of the same is to manage ads. The Adserver that the company currently uses has the option of tags via REST API and others, so it is easy to work with responsiveness, because the generated HTML is explicit with tags like Divs and imgs.

  • Since it is not a particular case but a whole workflow I think that really in your case it would not make sense to turn the animation into Gif. I mentioned this option because it’s a practice I used to do when I had a CSS3 animation and I wanted it to work in the old browsers, so I converted the animation into Gif and it was quiet. But sometimes someone comes along with a really functional answer in this case

  • 1

    I did an update on the question, you probably got it wrong, I have a GIF of the current functioning: https://g.recordit.co/Ypnafarlgd.gif It would be simple if the DFP allowed to put the proportional width, the question is to be able to force the script injection to it.

  • It can be in jQuery?

  • Solving the problem will be very well valid. Easy to implement on the preferred page.

Show 5 more comments

1 answer

2


First add to your CSS:

iframe{
   width: 100% !important;
}

Solution in jQuery using contents():

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

See on Jsfiddle

Solution using pure Javascript:

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;";
   }

}

See on Jsfiddle

  • I already checked the phone and at first it’s working beautifully. Once I am in the computer I will perform the implantation and if you solve attribute as best answer. Thank you in advance for being willing to help.

  • Blz friend! Good luck!

  • I did some tests, just in a document .html locally does not work, upnding the same to the server, without other content together, works cool. Now I’m suffering a little to find out if there are conflicts or really doesn’t work on a page. See: https://vargemdocedro.oregionalsul.com/ Iframe is responsive to what it seems, but the content is not affected on this page.

  • I’ll take a look...

  • There are some conflicts on the page... within the style.css there are some @import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);... change to https and see if http in other places tb and alter

  • Altered, but as I imagined, did not affect the content.

  • Let’s go continue this discussion in chat.

Show 2 more comments

Browser other questions tagged javascript html css google iframe

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