Ocamba Display renders every IAB format and a JSON-configured video player. Explore a real publisher page filled with live units, then tune placement, animation and options yourself — everything here is drawn by the real SDK.
A full publisher homepage with a billboard, in-feed rectangles, a sticky half-page, a netboard
and a docking anchor — every unit a real slot(), at true size.
Pick any of the 26 formats, choose a placement and entrance animation, flip the container options — and watch it render live while the code writes itself.
Open the playground ›Banners, bare images, free-form HTML5, five native templates, AdSense-style native, video and
audio via slot(), YouTube and hosted-creative embeds — each live, each documented.
Interscroller, expand, pushdown, float, reveal, parallax and skin — a field-guide article where every behavior runs live as you scroll, with the config to copy.
Read the field guide ›A JSON-configured player with instream ads, float-on-scroll, chapters and theming — tune every option live and drive it with the full control surface.
Open the player studio ›Every format below is supported out of the box, shown at true proportions with a sample creative. Filter by the device it suits best, or click any to tune it live.
The complete SDK surface from the formats reference — each enum value linked to the demo that exercises it. If it's in the docs, you can see it run here.
| Option | Values | See it live |
|---|---|---|
Renderers — server item l | ||
banner | image banner, lazy s:1, isolation hint e | Renderers › banners |
img | bare clickable image | Renderers › banners |
responsive | free-form HTML5 via md.html | Renderers › HTML5 |
layout1…5, g | native templates, macro-filled | Renderers › native · in-feed on the living demo |
video | placements inline · overlay · instream, skip sk/so | Renderers › video |
audio | inline bar · self-created anchor | Renderers › audio |
embed | kind:'yt' bridge · kind:'dsp' hosted creative | Renderers › embed |
Placement behaviors — behavior / item b | ||
interscroller | window height h | Behaviors §1 |
expand / pushdown | trigger: click|view, size expand/w2×h2 | Behaviors §2–3 |
float | floatPos: br|bl|tr|tl | Behaviors §4 |
reveal | position: top|bottom, + anchor = rollband | Behaviors §5 |
parallax | depth: 0..1 | Behaviors §6 |
skin | wallpaper behind the page | Behaviors §7 |
server-driven b | item b/w2/h2; config wins | Behaviors §8 |
| Containers & placements | ||
overlay / interstitial | backdrop, close, closeAfter, label | Playground |
anchor | position: top|bottom | Playground · living demo footer |
over | strip over a target element | Playground · living demo lead visual |
| Animations, isolation, click, sizing | ||
anim / animOut | fade slide slide-down slide-left slide-right zoom pop flip + animMs | Playground |
isolation | shadow · iframe · none | Playground · e-hint card |
click | tab · window · top | Playground |
fit:'scale' | downscale-only object-fit for HTML creatives | Renderers › extras · Playground |
Content player — OcambaDisplay.player() | ||
| player | playlist, preroll ads, float + corners, aspect, autoplay visible, chapters, controls, theming, position/pip/fullscreen | Player studio |
| Request-side (nothing to render — copy the snippet) | ||
cat, ctx | targeting; ctx rides as base64url JSON — this preview itself steers its demo feed through it | config in Playground snippet |
identity, consent | GDPR/GPP signals; auto CMP detection — see gdpr-display docs | docs |
timeout, scriptAttrs, onEvent | plumbing — every demo page logs onEvent live | event chips & logs everywhere |
mds | legacy tracking sets, read only without md — server-side concern, nothing to render | note in Renderers › extras |
Declare a slot in markup, or drive it programmatically. One script tag, no build step.
<ins class="axocmba"
data-slot="AF6PgAAt3hc/leaderboard"
data-sizes="728x90"
data-cat="news"></ins>
<script async src="/sdk/display.js"></script>
OcambaDisplay.slot({
zone: 'AF6PgAAt3hc',
slot: '300x600',
container: { mode: 'overlay', backdrop: '.55', label: 'Ad' },
anim: 'zoom', animMs: 400,
onEvent: (e, d) => console.log(e, d)
});