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.