From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Responsive Banners

To enable a banner to be responsive when serving from Adform tag, it has to contain a call to resize function:

resize (width, height) – resize the html asset and parent iframe. width and height can be as a Number (pixels), or String defining the percentage (for example '100%').

It needs to be included, because all HTML5 banners in Adform are put inside iframes with asset height and width specified in the manifest.json file. So resize function allows to scale that iframe.

The resize function is called on dhtml.external object. Usage example:

if (dhtml.external && dhtml.external.resize) dhtml.external.resize ('100%', '100%');

 

However, for the banner to actually become responsive, its styling should be made responsive. It includes setting HTML elements dimensions with relative values (in percentage) and positioning elements in locations relative to other elements. For example, if the banner has to be scaled to full window in width, the main wrapper element’s styling should be:

#someWrapper {
width: 100%;
…
}

as well as elements inside it should have relative positions:

#someElement {
left: 10%;
bottom 30%;
…
}

to stay in their relevant places after the banner is resized.

 

When setting up a campaign in Adform's platform, a below variable should be added in the rich media banner settings to make sure responsive ads works properly with the publisher's friendly iframes.

 Custom Variable