JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<iframe class="Ad" id="ad13-TopMedRect" width="300" height="250"></iframe>
<script>ads.render({
    baseUrl:"http://dfp.doubleclick.com/metacafe/adi/",
    placement: "ad13-TopMedRect",
    params: {
        "studio": "movie_trailers",
        "rating": "clean",
        "Trickey": "y&e;s"
    }
});</script>

<script class="Ad" id="ad11"></script>
<script>ads.render({baseUrl:"http://dfp.doubleclick.com/metacafe/adj/",  placement: "ad11", params: {studio:"movie_trailers", hd: "yes"}});</script>

CSS

.Ad {outline: 1px solid #DDD; overflow: hidden; border: none;}

JavaScript

Object.extend({
    toDFPString: function(object){
        var result = Object.toQueryString(object);
        return result.split('&').join(';');
    }
});

var Ads = new Class({
    Implements: [Options, Events],
    initialize: function(options){
        this.setOptions(options);
        this.ads = {};
        this.initClientSideValues();
    },
    initClientSideValues:function(){
        this.tile = 0;
        this.options.ord = Math.random();
    },
    render: function(adData){
        this.ads[adData.placement] = adData;
        var adDataUrl =  adData.baseUrl
                        + Object.toDFPString(adData.params)
                        + ';tile=' + this.tile++
                        + ';ord=' + this.options.ord;
        
        $(adData.placement).set('src', adDataUrl);
        console && console.log(adDataUrl);
    }
});

var ads = new Ads();