Applying CSS within an iFrame

Question

I\'m trying to change the width of my ad image from pixels to percentages. I\'m using Google DoubleClick or \"DFP\". It automatically puts your ad image inside an iframe, makin

Answer 1

I found that I could use the synchronous loading, in junction with the "smart iframe" Google touts, that I could rip the link out of their iframe and place it in my DOM.

Note that I pass the same id for the dfp code to my AdjustGoogleAd method. I'm messing with the width/height attributes because we're on a responsive site.

<script type='text/javascript'>
    (function () {
        var useSSL = 'https:' == document.location.protocol;
        var src = (useSSL ? 'https:' : 'http:') +
        '//www.googletagservices.com/tag/js/gpt.js';
        document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    })();
</script>
<script type='text/javascript'>
    googletag.defineSlot('{AD SLOT HERE}', [WIDTH, HEIGHT], 'dfp-div-id').addService(googletag.pubads());
    googletag.pubads().enableSyncRendering();
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();

    $(function () {
        AdjustGoogleAd('dfp-div-id');
    });

    function AdjustGoogleAd(bannerId) {
       var banner = $('#' + bannerId);
       var contents = $('#' + bannerId + ' iframe').contents();

       contents.find('a').clone().attr('id', bannerId + '_a').appendTo('#' + bannerId);
       var newLink = $('#' + bannerId + '_a');
       newLink.siblings().remove();
       newLink.find(".img_ad").removeAttr('height').removeAttr('width');
    }

</script>

With HTML:

<div id='dfp-div-id'>
     <script type='text/javascript'>
         googletag.display('dfp-div-id');
     </script>
</div>

Answer 2

Here is a jsfiddle with an example of what I am pretty sure you want to do... so yes it is possible... whether it violates the terms of DFP is another question!

http://jsfiddle.net/e3dUT/ (resize the panes to see it working, only working 100% in chrome at the moment, but that should just be a matter of tweaking it some more.)

$.dfp({
    dfpID: '12589173',
    afterAllAdsLoaded: function ($adUnits) {
        $('iframe').attr('width', '100%').attr('height', '100%');
        $adUnits.each(function () {
            $contents =  $(this).find('iframe:first').contents();
            $contents.find('img').width('100%').height('auto');
        });
    }
});

It uses the jQuery DFP plugin I created, but with a bit of work you could implement this in stock javascript as well.

Answer 3

The iframe here is on a different domain. You can't modify it's contents with CSS or JS.