ADS-002
A banner embed that does not get cut off on a phone
A 728x90 in a 360px column overflows or gets clipped. Two CSS properties on the iframe and one change in the renderer fix it for every publisher at once.
Fixed-size banner embeds assume the slot is at least as wide as the creative. On a phone it is not, so the banner either overflows the layout or gets sliced off at the edge, and the impression is paid for but never seen.
The fix has two halves and both are needed. The iframe scales down with a max width and a locked aspect ratio, so it never exceeds its container. Then the page rendered inside the iframe has to size its own contents relative to its viewport rather than in fixed pixels, or you get a correctly sized frame with an oversized creative inside it.
Because the second half lives on your server, fixing it once fixes every publisher who ever pasted your embed.
<!-- What the publisher pastes. Scales down, never overflows. -->
<iframe src="https://yournetwork.example/b.php?z=SLOT_SLUG"
style="width:100%; max-width:728px; aspect-ratio:728/90; border:0; display:block;"
scrolling="no" frameborder="0" loading="lazy"></iframe>
<?php
// b.php — render the creative relative to the frame, not in fixed pixels.
$w = 728; $h = 90;
?>
<style>
html,body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; }
.creative {
width:100%; height:100%;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
text-align:center; box-sizing:border-box;
}
.creative img { max-width:100%; max-height:100%; object-fit:contain; }
/* vh units so text shrinks with the frame instead of overflowing it */
.creative .t { font-size:min(4.5vh, 22px); font-weight:700; line-height:1.15; }
.creative .s { font-size:min(3vh, 14px); opacity:.85; }
</style>
<a class="creative" href="<?= htmlspecialchars($clickUrl, ENT_QUOTES) ?>" target="_blank" rel="noopener">
<span class="t"><?= htmlspecialchars($title) ?></span>
<span class="s"><?= htmlspecialchars($subtitle) ?></span>
</a>Using it
Give every banner size its own aspect ratio in the embed you hand out. Publishers copy and paste; they will not compute it.
Tell publishers to re-copy the embed after you change it. The iframe attributes live on their page, so that half of the fix does not propagate on its own.
What bites people
aspect-ratio without max-width will stretch a leaderboard across a wide desktop column and look absurd. You need both.
loading="lazy" on an ad iframe is usually what you want, but it means an ad below the fold may never load — and therefore never earn. Leave it off for above-the-fold slots.