Phoenix Prediction Docs

Sizing

Choose container sizing or auto sizing for the iframe

The Phoenix Prediction iframe supports two sizing modes.

Container Sizing

Container sizing is the default. 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?token=JWT&experience=homepage"
  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. Your page updates the iframe height, so the parent page can scroll naturally.

The iframe sends:

window.parent.postMessage(
  { type: 'phoenix:resize', height: 1180 },
  parentOrigin,
);

The parent page applies:

iframe.style.height = `${height}px`;

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.

On this page