Iframe Embed

Embed the FXPlayer on any page with a single <iframe> tag. Configure playback, CTAs, and rendering via URL parameters, or control the player dynamically with the postMessage API.

Basic embed

Set the video source with the src parameter. No JavaScript required.

<iframe
  src="https://cdn.impossible.io/support/embed.html?src=https://example.com/video.mp4"
  width="720" height="405"
  allow="fullscreen"
></iframe>

Autoplay (muted) with poster

Browsers require muted for autoplay. Set autoplay=1&muted=1 and add a poster image.

<iframe
  src="https://cdn.impossible.io/support/embed.html
    ?src=VIDEO_URL
    &autoplay=1
    &muted=1
    &poster=POSTER_URL"
  width="720" height="405"
  allow="autoplay; fullscreen"
></iframe>

CTA overlays via URL parameters

Add CTAs using dot-notation: cta.{id}.{property}=value. This example shows a promo banner at 2–6s and a subscribe button from 3s onward.

<iframe src="https://cdn.impossible.io/support/embed.html
  ?src=VIDEO_URL
  &cta.promo.content=<div style='...'>50% Off!</div>
  &cta.promo.start=2
  &cta.promo.end=6
  &cta.promo.position=center
  &cta.promo.dismissible=true
  &cta.sub.content=<div style='...'>Subscribe</div>
  &cta.sub.start=3
  &cta.sub.position=bottom
  &cta.sub.link=https://example.com/subscribe
  &cta.sub.dismissible=true"
  width="720" height="405"
  allow="fullscreen"
></iframe>

postMessage API

Send commands to the embed and receive events back. Use this for dynamic playback control, CTA injection, and analytics.

const iframe = document.getElementById('player-iframe');

// Playback
iframe.contentWindow.postMessage({ action: 'play' }, '*');
iframe.contentWindow.postMessage({ action: 'pause' }, '*');
iframe.contentWindow.postMessage({ action: 'seek', time: 30 }, '*');

// Volume
iframe.contentWindow.postMessage({ action: 'setVolume', volume: 0.5 }, '*');
iframe.contentWindow.postMessage({ action: 'mute' }, '*');

// Inject a CTA dynamically
iframe.contentWindow.postMessage({
  action: 'addCTA',
  id: 'promo',
  options: {
    content: '<div style="...">Limited Offer!</div>',
    startTime: 5,
    endTime: 15,
    position: 'center',
    dismissible: true,
  }
}, '*');

// Listen for events from the embed
window.addEventListener('message', (e) => {
  if (e.data?.source === 'fxplayer') {
    console.log(e.data.event, e.data.data);
  }
});

Impossible.io rendering

Embed a dynamically rendered video. Set projectId, movie, and optionally region and params.

<iframe
  src="https://cdn.impossible.io/support/embed.html
    ?projectId=YOUR-PROJECT-ID
    &movie=welcome-video
    &region=eu-west-1
    &params={"name":"Alex","company":"Acme"}"
  width="720" height="405"
  allow="fullscreen"
></iframe>

URL parameter reference

Video

Parameter	Description
`src`	Video URL
`format`	`"mp4"` \| `"hls"` \| `"auto"` (default: auto-detect)
`poster`	Poster image URL
`autoplay`	`1` / `0` (default: 0, requires muted for most browsers)
`muted`	`1` / `0` (default: 0)
`loop`	`1` / `0` (default: 0)

Controls

Parameter	Description
`controls`	`1` / `0` (default: 1)
`keyboard`	`1` / `0` (default: 1)
`autoHide`	`1` / `0` (default: 1, hide controls during playback)
`autoHideDelay`	Milliseconds before auto-hide (default: 3000)

Impossible.io rendering

Parameter	Description
`projectId`	Project ID
`movie`	Movie name
`region`	Region (e.g. `"eu-west-1"`)
`routingKey`	Routing key for dedicated clusters
`parallel`	Parallel render count
`params`	JSON object of render parameters

CTA overlays (dot-notation)

Use cta.{id}.{property} to configure overlays via URL parameters.

Parameter	Description
`cta.{id}.content`	HTML content string
`cta.{id}.start`	Start time in seconds
`cta.{id}.end`	End time in seconds (omit for persistent)
`cta.{id}.position`	`"center"` \| `"top"` \| `"bottom"`
`cta.{id}.dismissible`	`"true"` / `"false"`
`cta.{id}.pauseOnShow`	`"true"` / `"false"`
`cta.{id}.link`	Wraps content in a clickable link
`cta.{id}.className`	Additional CSS class

Alternatively, pass all CTAs as a JSON array: ctas=[{"id":"x","content":"...","startTime":5}]

postMessage commands (parent → embed)

Action	Parameters
`play`	—
`pause`	—
`stop`	—
`seek`	`time: Number`
`setSrc`	`url: String`, `format: String`
`setVolume`	`volume: Number` (0–1)
`mute` / `unmute`	—
`enterFullscreen` / `exitFullscreen` / `toggleFullscreen`	—
`addCTA`	`id: String`, `options: Object`
`removeCTA` / `showCTA` / `hideCTA`	`id: String`
`setMovie`	`projectId: String`, `movie: String`
`setParams`	`params: Object`
`setToken`	`token: String`
`getState`	— (triggers a `state` event back)

postMessage events (embed → parent)

All events include source: "fxplayer".

Event	Data
`ready`	—
`play` / `pause` / `ended`	—
`timeupdate`	`{ time, duration }`
`volumechange`	`{ volume, muted }`
`fullscreenchange`	`{ fullscreen }`
`error`	`{ message, code }`
`cta:show` / `cta:hide` / `cta:click`	`{ id }`
`state`	`{ playing, currentTime, duration, volume, muted, fullscreen }`

← Back to Video Players