Q&A
  1. Home
  2. Support
  3. Question/Answer
  4. HTML 5 iFrames being given an automatic inline style height of 150px regardless of the content size
Mr. Pickles the AdPlugg Pug

HTML 5 iFrames being given an automatic inline style height of 150px regardless of the content size

+1
0
-1

So I'm testing out HTML5 ads on our dev site and I've run into this issue with the iframe being generated. I've uploaded the ads as zip files and they seem to display properly on their own.

Here's the code that seems to be the culprit. 

<iframe id="adplugg-iframe-pvgvdu2tgemfr" scrolling="no" class="adplugg-iframe adplugg-responsive-iframe" data-adplugg-src="http://cdn1.adplugg.io/apusers/serve/A48222563/file/97744/index.html?clickTag=null&amp;clickTarget=_self" src="http://cdn1.adplugg.io/apusers/serve/A48222563/file/97744/index.html?clickTag=null&amp;clickTarget=_self" style="height: 150px;"></iframe>

If you click on the src link, you can see the served ad should be a skyscraper, 600px tall, but when it appears on our site, the iframe crops it at 150px. I've tried it with multiple HTML5 ads and that [style="height: 150px;"] is always added to the iframe regardless of the content height. 

Image and banner ads display correctly in the same ad placement so it's not an adplugg size restriction at play.

Do you have any insight as to what's going on?


Submitted by northwestprimetime on Sat, 06/10/2023 - 08:02

Answers

+1
0
-1

UPDATE (Aug 18, 2023) [FIXED]: We've updated our systems to determine the height using the GWD (Google Web Designer) ad metadata (included in the ad creative), so this should now be resolved (making the below modifications to the ad creative no longer necessary).

---

Sorry for the trouble. It looks like that ad was created with Google Web Designer and that a size isn't being specified by the creative. Since AdPlugg can handle any size ad, it looks to the ad creative to see what size it should make the iframe. Since no size was specified, AdPlugg doesn't know how to size it and ends up just leaving the iframe at the default height for iframes, 150px.

To fix, please set the size of the ad by doing the following:

  • In Google Web Designer, click Code View (in the top right).
  • At the top of the first <style> block (at the top - probably around line 22) change the following:

FROM

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
}

TO

html, body {
    width: 300px;
    height: 600px;
    margin: 0px;
}
  • Update "300px" and "250px" in the above to be the actual size that you want for the ad (if different than 300x600). 
  • Once you've made the CSS change, re-publish the creative and re-upload it to AdPlugg.

We plan to update our systems to properly detect the size of ads like this one without requiring this change, but this will fix it in the meantime.

Please let me know if you have any questions or if you need any help.

Submitted by collinkrawll on Mon, 06/12/2023 - 10:26
Thank you. I've tried that with a different ad created in Google Web designer and it looks like there is a parsing issue with it on adplugg. When I upload the zipped file to https://www.previewads.com/html5-ad-tester , it shows up just fine. But when I upload the same zipped file to adplugg, a bunch of js code is displayed in the ad preview and again if it is placed on the site. Is that common with ads built in Google Web Designer, or is it something like a jquery version conflict at play? Here's what it shows: "+a+"");return(new DOMParser).parseFromString(N(a),"text/html").body.children[0]} function Lb(a,b){if(!a)return Ka;var c=document.createElement("div").style;Ob(a).forEach(function(d){var e=qa&&d in Ib?d:d.replace(/^-(?:apple|css|epub|khtml|moz|mso?|o|rim|wap|webkit|xv)-(?=[a-z])/i,"");0!=e.lastIndexOf("--",0)&&0!=e.lastIndexOf("var",0)&&(d=Eb(a,d),d=jb(e,d,b),null!=d&&Fb(c,e,d))});return new J(c.cssText||"",I)} function Pb(a){var b=Array.from(W(pb,a,"getElementsByTagName",["STYLE"])),c=ma(b,function(h){return la(Cb(h).cssRules)});c=Kb(c);for(var d=[],e=0;el?1:nm?1:g"+d+""),Pb(d),d=d.innerHTML);d=Wa(d);var e=document.createElement("template"); if(Wb&&"content"in e)$a(e,d),e=e.content;else{var f=document.implementation.createHTMLDocument("x");e=f.body;$a(f.body,d)}d=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT,null,!1);for(e=Rb?new WeakMap:new Tb;f=d.nextNode();){c:{var h=c;var k=f;switch(Db(k)){case 3:h=nc(h,k);break c;case 1:if("TEMPLATE"==X(k).toUpperCase())h=null;else{var g=X(k).toUpperCase();if(g in h.l||"http://www.w3.org/1999/xhtml"!=Gb(k))var m=null;else h.i[g]?m=document.createElement(g):(m=O(),h.v&& Ab(m,"data-sanitizer-original-tag",g.toLowerCase()));if(m){var t=m,q=zb(k);if(null!=q)for(var n=0;g=q[n];n++)if(g.specified){var l=h;var R=k,S=g,F=S.name;if(0==F.lastIndexOf("data-sanitizer-",0))l=null;else{var Xa=X(R);S=S.value;var sa={tagName:x(Xa).toLowerCase(),attributeName:x(F).toLowerCase()},ta={o:void 0};"style"==sa.attributeName&&(ta.o=Bb(R));R=lc(Xa,F);R in l.h?(l=l.h[R],l=l(S,sa,ta)):(F=lc(null,F),F in l.h?(l=l.h[F],l=l(S,sa,ta)):l=null)}null!==l&&Ab(t,g.name,l)}h=m}else h=null}break c; default:h=null}}if(h){if(1==Db(h)&&e.set(f,h),f=Y(f),k=!1,f)g=Db(f),m=X(f).toLowerCase(),t=Y(f),11!=g||t?"body"==m&&t&&(g=Y(t))&&!Y(g)&&(k=!0):k=!0,g=null,k||!f?g=b:1==Db(f)&&(g=e.get(f)),g.content&&(g=g.content),g.appendChild(h)}else for(h=f;f=h.firstChild;)h.removeChild(f)}e.clear&&e.clear();c=b}else c=O();0")+1,c.lastIndexOf("
‐ northwestprimetime Wed, 06/21/2023 - 08:55
I think that we will be able to help you better via email. If you could, please contact us via the Contact link at the top of the screen. Thanks! -Collin
‐ collinkrawll Wed, 06/21/2023 - 14:57

Answer This Question!