Skip to content
PuniDocs
Open Puni

Embedding

Put the player inside another page with the copied iframe, size it, hide the header, and know what the host page can and cannot do.

Any link can be an iframe. The snippet the share dialog copies works in plain HTML, React and every web framework, and the player inside it is the same one the share page uses.

#Copy the embed

In the studio, open Share › Share a link…, then the link row’s ⋯ menu, and choose Copy embed code. On a share page, the same copy sits in the scene menu under Copy › Embed code.

html
<iframe
  src="https://puni.design/share/LINK?embed=1"
  title="Puni scene"
  width="800"
  height="500"
  style="border:0;width:100%;height:auto;min-height:220px;aspect-ratio:8/5"
  allow="fullscreen"
  allowfullscreen
  loading="lazy"
  referrerpolicy="no-referrer"
></iframe>

?embed=1 drops the page header so the scene fills the frame. Give the iframe at least 320 pixels of width.

#What plays

The player starts paused and muted, also when the visitor prefers reduced motion. Its playback controls work inside the frame. The scene menu, downloads and the Open button belong to the page header and do not appear in an embed. Sound needs a click inside the frame.

The iframe shows the saved version the link points at. Later edits stay private until you make a new link. Revoking the link turns every embed of it into an unavailable page.

#Controlling the player from the host

A host page can opt in to a small message API: inspect an object's controls, change a parameter, seek, play, pause, reset, and trigger a response. Read The embed protocol.

Read Sharing for what a link discloses.

Was this useful?