Sizing | Phoenix Prediction Docs

The Phoenix Prediction iframe supports two sizing modes.

Container Sizing

Container sizing is the default (?sizing=container). Your page controls the iframe dimensions, and Phoenix scrolls internally when content is taller than the frame.

<iframe
  src="https://embed.prediction.phoenixverse.io/o/acme?sizing=container&token=JWT"
  style="width: 100%; height: 720px; border: 0"
></iframe>

Use container sizing for:

Game-style pages
Sportsbook tabs
Sidebars
Modals
Fixed widgets
Mobile full-screen placements

Auto Sizing

Auto sizing lets the iframe tell the parent page how tall its content is. Enable it with ?sizing=auto:

<iframe
  src="https://embed.prediction.phoenixverse.io/o/acme?sizing=auto&token=JWT"
  style="width: 100%; border: 0"
></iframe>

The iframe emits a resize event over the parent bridge:

window.parent.postMessage(
  { v: 1, ns: 'pmm', kind: 'event', name: 'resize', payload: { height: 1180 } },
  parentOrigin,
);

The parent page matches on the envelope discriminators and applies the height:

window.addEventListener('message', (m) => {
  const data = m.data;
  if (data?.ns === 'pmm' && data.kind === 'event' && data.name === 'resize') {
    iframe.style.height = `${data.payload.height}px`;
  }
});

If you use the host SDK, it applies the height for you automatically.

Use auto sizing for article-like or lobby-like placements where inner iframe scrolling would feel awkward.

Recommendation

Start with container. Move to auto only when the embed is part of a longer parent page and you want one continuous scroll.