> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zerodash.studio/llms.txt
> Use this file to discover all available pages before exploring further.

# Iframe integration

> Supported, but not preferred. The requirements you must meet if you embed.

<Warning>
  **Opening the game in a new tab or window is the preferred integration.** It gives the best compatibility and the best player experience across every device. Iframe support is inconsistent between browsers and operating systems — especially on mobile — and when you embed, the sizing problems become yours.
</Warning>

If you still need to embed, meet the requirements below exactly.

## Required attribute

```html theme={null}
<iframe
  src="https://games.zerodash.studio/lucky-duck?s=..."
  allow="fullscreen"
></iframe>
```

`allow="fullscreen"` lets the game enter full-screen mode, which several games rely on for a usable layout on small viewports. Omit it and players get a cramped experience with no way out of it.

## Sizing

<Tabs>
  <Tab title="Mobile">
    | Dimension | Minimum  |
    | --------- | -------- |
    | Height    | `95lvh`  |
    | Width     | `100lvw` |

    ```css theme={null}
    .zd-game {
      width: 100lvw;
      height: 95lvh;
      border: 0;
    }
    ```

    <Warning>Iframe use on mobile devices is discouraged. If you have any option to open a new tab here, take it.</Warning>
  </Tab>

  <Tab title="Desktop and tablet">
    | Dimension | Minimum |
    | --------- | ------- |
    | Height    | `95svh` |
    | Width     | `80svw` |

    ```css theme={null}
    .zd-game {
      width: 80svw;
      height: 95svh;
      border: 0;
    }
    ```
  </Tab>
</Tabs>

<Note>
  The units are deliberate. `lvh`/`lvw` (**l**argest viewport) on mobile reserve space for the browser chrome at its smallest, so the game does not get clipped when the address bar retracts. `svh`/`svw` (**s**mallest viewport) on desktop size against the stable viewport. Substituting `vh` reintroduces the mobile clipping these units exist to avoid.
</Note>

## A working embed

```html theme={null}
<style>
  .zd-frame {
    width: 100lvw;
    height: 95lvh;
    border: 0;
    display: block;
  }

  @media (min-width: 768px) {
    .zd-frame {
      width: 80svw;
      height: 95svh;
      margin-inline: auto;
    }
  }
</style>

<iframe
  class="zd-frame"
  src="https://games.zerodash.studio/lucky-duck?s=..."
  allow="fullscreen"
  title="Lucky Duck"
></iframe>
```

## What you take on

<AccordionGroup>
  <Accordion title="Viewport and keyboard on mobile" icon="mobile">
    The on-screen keyboard resizes the viewport, and browser chrome appears and retracts as the player scrolls. Both can shrink the game below a playable size unless the container is sized in `lvh`/`lvw` as specified.
  </Accordion>

  <Accordion title="Full-screen and orientation" icon="expand">
    Without `allow="fullscreen"` the game cannot escape your container. Some games are unusable in portrait on a small viewport, and full screen is their way out.
  </Accordion>

  <Accordion title="Third-party storage restrictions" icon="cookie">
    Safari's ITP and equivalent protections restrict storage in third-party frames. Sessions that survive a reload in a top-level tab can silently fail to resume inside an iframe.
  </Accordion>

  <Accordion title="Nested scroll containers" icon="arrows-up-down">
    An iframe inside a scrollable wrapper produces two competing scroll surfaces. Touch gestures meant for the game get eaten by your page.
  </Accordion>
</AccordionGroup>

<Tip>
  A middle path that keeps your branding: open the game in a full-screen overlay within your own page — your header stays, the game gets the whole viewport, and you avoid nested scrolling.
</Tip>