embed.js options

Use one workspace script per page and one video div per video. The default Fit mode uses the video's real metadata ratio.

Center buttons: data-center-play and data-center-replay on the video div (or as loader defaults) accept auto, show, or hide. Direct iframe and watch URLs use center_play and center_replay. Each inherits independently from the video override and workspace default. Auto hides the button when a visible overlay intersects its moved rectangle; Hide preserves the control bar and click-on-video playback.

On every plan, set independent picture-relative positions with data-center-play-position="30,50" and data-center-replay-position="70,50". Direct iframe and watch URLs accept center_play_position=30,50 and center_replay_position=70,50. Each coordinate is a number from 0 to 100; omit a position to inherit the video/workspace value, ultimately 50,50. Video-div attributes override loader defaults. Positions track the video picture through contain, crop and fullscreen; the rendered circle stays inside the visible picture without rewriting its stored position.

On every plan, resize the Play and Replay circles independently with data-center-play-size="18" and data-center-replay-size="18". Direct iframe and watch URLs accept center_play_size=18 and center_replay_size=18. Each size is a finite number from 8 to 40, measured as a percentage of the shorter video-picture edge; omit it to inherit the video/workspace value. An unset (null) workspace size keeps the existing responsive circle size; a per-video null restores workspace inheritance. The same sizes apply through contain, crop and fullscreen, with rendered circles kept inside the picture.

Script embed

Add the workspace script once per page (or in the site head); only the video ID changes between divs.

<script async src="https://v.getplayflow.co/embed.js" data-playflow-workspace="WORKSPACE_PUBLIC_ID"></script>
<div data-playflow-video="VIDEO_PUBLIC_ID"></div>

The player uses real video dimensions, including portrait and square videos, once metadata arrives. Because metadata arrives asynchronously from a cross-origin iframe, the page may reflow after its first paint; the ID-only snippet cannot guarantee zero page layout shift.

Sizing options

For a website background, put data-playflow-mode="background" on the placeholder. Use data-playflow-mode="standard" to override a saved Background default. Each instance is independent, including two embeds of the same video. Background uses cover sizing, muted looping autoplay and no controls or input. The loader keeps a required Playflow watermark clickable on the host page, with no second copy inside the iframe. See Background video for snippets, reduced-motion and autoplay-blocked behavior.

No sizing attributes are needed for Fit: it centers the video within the parent's width and explicit height or max-height. Choose data-sizing="fixed" for a contained frame or data-sizing="crop" to fill and crop a frame. Crop can hide picture content. Embeds fit; they do not fill unless you deliberately choose crop.

data-width and data-height accept integer pixels from 1 to 8192 for fixed/crop frames. Trusted player-ready dimensions determine the Fit ratio. Legacy data-aspect-ratio hints are superseded by real metadata. Invalid sizing values fall back to Fit and invalid dimensions are ignored.

For Fit, set max-height:320px (or your chosen height) on the immediate parent; automatic height is not a constraint. For direct iframes use the Share & embed sizing snippet. The player URL accepts fit=contain (default) or explicit fit=crop. A cross-origin iframe cannot measure its parent's CSS itself. Existing playback attributes and API messages are unchanged. Default contain can add letterboxing to older fixed-size frames, instead of cropping their video or poster.

Published Buttons, Hotspots and timed Play and Replay placements appear in this player on Marina and Fleet. See Interactivity for authoring and analytics; these placements do not require a new embed attribute or a change to your CSP.

Play and Replay in an embed

On all plans, data-center-play and data-center-replay accept auto, show or hide. Position each independently with data-center-play-position="30,50" and data-center-replay-position="70,50" (X,Y percentages of the picture), and set a diameter with data-center-play-size="18" or data-center-replay-size="18" (8–40% of its shorter edge). Omit an attribute to inherit the video, workspace and player defaults. The responsive size applies if no size is saved. The circle follows the picture in contain, crop and fullscreen; the player clamps it and hides center controls below a 44px shortest player edge, without preventing video click to play. For direct iframe/watch URLs, use center_play, center_replay, center_play_position, center_replay_position, center_play_size and center_replay_size instead.

Marina and Fleet owners can set up to 10 timed Play and Replay placements in the video’s Interactive editor tab, separate from the 20 clickable overlays. A published placement moves, resizes or hides Play, Replay or Both during its range; it cannot be authored with an embed attribute or Player API call. The host’s setAppearance override wins over the placement, followed by the saved video setting, workspace default and player default. A placement covering 0 applies before first play; one ending at the video duration applies to ended Replay. Timed changes animate over 150ms unless reduced motion is requested, and do not restart playback. See Player API: timed placements.

Optional playback overrides

Add playback attributes to an individual video div only when needed:

<script async src="https://v.getplayflow.co/embed.js" data-playflow-workspace="WORKSPACE_PUBLIC_ID"></script>
<div data-playflow-video="VIDEO_PUBLIC_ID"
     data-autoplay="muted"
     data-loop="true"
     data-remember-sound="true"
      data-start-quality="720"></div>

Script attributes

Set data-playflow-workspace on the loader <script>. Set the following playback attributes on the data-playflow-video element; the loader also accepts them as defaults. data-autoplay accepts off, muted, or sound. data-loop and data-remember-sound accept true or false. Leave an attribute unset to inherit the effective published setting. An invalid value emits a warning and is ignored.

Attribute	Values	Unset behavior
`data-autoplay`	`off` \| `muted` \| `sound`	Inherits
`data-loop`	`true` \| `false`	Inherits
`data-remember-sound`	`true` \| `false`	Inherits
`data-start-quality`	`auto` \| `360` \| `480` \| `720` \| `1080` \| `1440` \| `2160`	Inherits

Iframe and watch parameters

Direct iframe URLs and published watch URLs use the same options as query parameters. The current edge paths include both public IDs:

<iframe src="https://v.getplayflow.co/WORKSPACE_PUBLIC_ID/e/VIDEO_PUBLIC_ID?autoplay=muted&loop=1&remember_sound=1"
        loading="lazy"
        allow="autoplay; fullscreen; picture-in-picture; screen-wake-lock"
        title="Playflow video"></iframe>

https://v.getplayflow.co/WORKSPACE_PUBLIC_ID/VIDEO_PUBLIC_ID?autoplay=muted&loop=1&remember_sound=1

autoplay accepts off, muted, or sound. loop accepts 1 or 0, and remember_sound accepts 1 or 0. Unset parameters inherit. start_quality accepts auto, 360, 480, 720, 1080, 1440, or 2160. An invalid parameter emits a warning and is ignored.

Starting quality and preload

Choose Auto, Start at 360p, Start at 480p, Start at 720p, Start at 1080p, Start at 1440p, or Start at 4K (2160p).

Starts here, then adjusts to the viewer's connection like Auto.

Auto considers displayed player size and connection. A numeric value requests the starting rendition when available, not a fixed playback quality. Only available source renditions are used; there is no upscaling. If the requested rendition is unavailable, a supported rendition is chosen. Playback remains adaptive afterward. The in-play Quality menu is separate: selecting a rendition there fixes quality until Auto is selected.

Near-viewport players preload without playing; saveData disables preload. The script attribute data-start-quality or iframe/watch URL parameter start_quality overrides the published video setting for that embed. Leave it unset to inherit. Neither preload nor choosing a rendition starts playback.

Playback precedence and sound memory

The platform default is autoplay off, loop false, and remember sound true. Workspace Customization supplies the workspace defaults. These are workspace configuration values, not a remembered viewer choice. A video’s Playback override can replace each field. An explicit script attribute or URL parameter then replaces that field for the individual embed. An unset field inherits from this chain. Configure workspace playback defaults in Customization.

When sound memory is enabled, one preference is stored per workspace public ID where browser storage permits. A viewer’s choice applies across videos in that workspace and is shared by watch pages, the iframe player, and embed.js where storage permits. A fresh viewer starts muted. A saved muted choice stays muted, while a saved unmuted choice allows a sound attempt in those modes on desktop. Stale per-video keys are ignored and are not migrated. With rememberSound disabled, the configured autoplay mode is used without reading or writing a sound preference. Autoplay off never reads or writes a preference.

Touch devices always start muted, even with a saved unmuted choice; a tap can unmute.
If the browser forces muted playback, the player stays muted and never overwrites the saved preference.
Preview never starts with sound and never reads or writes sound preferences.

Browser autoplay policy can still block playback. In that case the visitor can start the video with the player controls. Looping follows the effective loop value after these options are resolved.

Analytics and oEmbed

Use analytics=off to disable playback analytics. Compatible tools can request oEmbed metadata for a published Playflow watch URL.

Content Security Policy

On the page hosting a Playflow embed, add https://v.getplayflow.co to your existing script-src and frame-src allowlists. Keep the other sources, nonces, and hashes your site needs. For example:

Example parent-page CSP directives

Content-Security-Policy:
  script-src 'self' https://v.getplayflow.co;
  frame-src 'self' https://v.getplayflow.co;

embed.js loads the iframe from the player origin. The player fetches its media and analytics inside that cross-origin iframe, whose CSP is managed separately. You do not need to add playback CDN media or image sources to the parent page solely for this embed.

Published embeds support fullscreen and picture-in-picture where the browser allows them.

Loading, analytics and accessible naming

Use data-loading="eager" when the player should load without waiting for viewport proximity. Otherwise the loader controls offscreen loading. Set data-playflow-title on the video container to provide the iframe's accessible title; the default is Playflow video player. This is not the saved video's title.

Set data-playflow-analytics="off" on the video container to disable player analytics for that embed. The loader also honors the browser's Do Not Track value of 1. data-playflow-processed is reserved for the loader's initialization bookkeeping; do not set it yourself.