Video Players

ImpossibleFX renders personalized videos on demand and returns a standard video URL. You can use that URL as a source in any video player that accepts external media.

This page covers how to get a render URL and use it with popular third-party players.

Getting a render URL

There are two ways to get a playable video URL from ImpossibleFX.

Token-based URL (recommended)

First, make a render request to get a token:

curl -X POST https://render.impossible.io/v2/render/YOUR-PROJECT-ID \
  -H "Content-Type: application/json" \
  -d '{"movie": "welcome-video", "params": {"name": "Alex"}}'

The API returns a token:

{ "token": "v2:eu-west-1:abc123-def456-789" }

Build the video URL using the token and your desired format:

You can also use different retrieval modes — render (full render first), get (progressive download), or play (stream immediately).

Direct URL

For simpler use cases, render and retrieve in a single URL with no token step:

https://render.impossible.io/v1/render/YOUR-PROJECT-ID/welcome-video.mp4?name=Alex&company=Acme

Pass dynamic parameters as query strings. This is useful for email campaigns, CRM templates, or anywhere you need a single self-contained URL.

ImpossibleFX Player

The ImpossibleFX Player (FXPlayer) is a built-in HTML5 video player that handles rendering and playback in a single step. It streams via HLS using hls.js and includes custom controls, keyboard shortcuts, fullscreen support, and CTA overlays.

Quick setup

Include the player CSS and script, then create a player with your project details:

<link rel="stylesheet" href="https://cdn.impossible.io/support/fxplayer.css" />
<script src="https://cdn.impossible.io/fxplayer/v3/fxplayer.js"></script>

<div id="player" style="width: 640px; height: 360px;"></div>

<script>
  const player = new fxplayer.FXPlayer("player", {
    impossible: {
      projectId: "YOUR-PROJECT-ID",
      movie: "welcome-video",
      params: {
        name: "Alex",
        company: "Acme Inc",
      },
    },
  });
  player.play();
</script>

The player makes the render request, streams the video via HLS, and starts playback automatically.

Installation

<link rel="stylesheet" href="https://cdn.impossible.io/support/fxplayer.css" />
<script src="https://cdn.impossible.io/fxplayer/v3/fxplayer.js"></script>

npm install fxplayer

import { FXPlayer } from "fxplayer";
import "fxplayer/dist/fxplayer.css";

Creating a player

// Pass the ID of a container element
const player = new FXPlayer("player", options);

// Or pass the element directly
const el = document.getElementById("player");
const player = new FXPlayer(el, options);

The player creates a <video> element inside the container you provide.

Options

Impossible.io rendering options

Pass these inside the impossible object to configure server-side rendering:

Methods

Properties

Events

Listen to player events with on() and off():

player.on("ready", () => console.log("Video ready"));
player.on("timeupdate", ({ time, duration }) => {
  console.log(`${time}s / ${duration}s`);
});
player.on("error", ({ message }) => console.error(message));

Token-based playback

If you’ve already made a render request and have a token, you can skip the project/movie/params setup:

const player = new FXPlayer("player");
player.setToken("v2:eu-west-1:abc123-def456-789");
player.play();

Dynamic configuration

You can also configure the project and parameters after creating the player:

const player = new FXPlayer("player");
player.setMovie("YOUR-PROJECT-ID", "welcome-video");
player.setParams({ name: "Alex", company: "Acme Inc" });
player.play();

CTA overlays

The player supports Call-To-Action overlays that appear during or after playback. Use them for promotions, subscribe prompts, or end screens.

player.addCTA("promo", {
  content: '<div class="promo">50% off — use code SAVE50</div>',
  startTime: 5,
  endTime: 12,
  position: "center",
  dismissible: true,
});

CTA options

CTA methods

CTA events

CTA patterns

Timed promo — visible between 5s and 12s:

player.addCTA("promo", {
  content: '<div class="banner">Limited offer!</div>',
  startTime: 5,
  endTime: 12,
  position: "center",
});

Persistent pill — appears at 3s, stays until dismissed:

player.addCTA("subscribe", {
  content: '<div class="pill">Subscribe</div>',
  startTime: 3,
  position: "bottom",
  dismissible: true,
});

End screen — shown when the video finishes, pauses playback:

player.addCTA("end-screen", {
  content: '<div class="end">Thanks for watching! <button>Sign up</button></div>',
  position: "center",
  pauseOnShow: true,
  dismissible: false,
});

Examples

JW Player

JW Player is a widely-used commercial video player with HLS support, analytics, and ad integrations.

Using a token-based URL:

<div id="player"></div>

<script src="https://cdn.jwplayer.com/libraries/YOUR-PLAYER-KEY.js"></script>
<script>
  const token = "v2:eu-west-1:abc123-def456-789";

  jwplayer("player").setup({
    sources: [
      {
        file: `https://render.impossible.io/v2/render/${token}.m3u8`,
        type: "hls",
      },
    ],
    width: 640,
    height: 360,
  });
</script>

Using a direct URL:

<script>
  jwplayer("player").setup({
    file: "https://render.impossible.io/v1/render/YOUR-PROJECT-ID/welcome-video.mp4?name=Alex",
    width: 640,
    height: 360,
  });
</script>

Video.js

Video.js is the most popular open-source HTML5 video player, with a large plugin ecosystem and full HLS/DASH support.

Using a token-based URL:

<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>

<video
  id="my-video"
  class="video-js"
  controls
  width="640"
  height="360"
>
</video>

<script>
  const token = "v2:eu-west-1:abc123-def456-789";

  const player = videojs("my-video", {
    sources: [
      {
        src: `https://render.impossible.io/v2/render/${token}.mp4`,
        type: "video/mp4",
      },
    ],
  });
</script>

Using a direct URL:

<video
  id="my-video"
  class="video-js"
  controls
  width="640"
  height="360"
>
  <source
    src="https://render.impossible.io/v1/render/YOUR-PROJECT-ID/welcome-video.mp4?name=Alex"
    type="video/mp4"
  />
</video>

<script>
  const player = videojs("my-video");
</script>

HLS streaming with Video.js:

Video.js includes HLS support via its built-in VHS (Video.js HTTP Streaming) library:

const token = "v2:eu-west-1:abc123-def456-789";

const player = videojs("my-video", {
  sources: [
    {
      src: `https://render.impossible.io/v2/get/${token}.m3u8`,
      type: "application/x-mpegURL",
    },
  ],
});

Wistia

Wistia is a video platform focused on marketing and analytics. You can embed external video URLs using Wistia’s iframe embed or their Player API.

Using a token-based URL with an iframe:

<iframe
  src="https://fast.wistia.net/embed/iframe/WISTIA-VIDEO-ID"
  width="640"
  height="360"
  allowfullscreen
></iframe>

To use ImpossibleFX videos with Wistia, upload the rendered video via the Wistia Upload API:

# 1. Render the video
TOKEN=$(curl -s -X POST https://render.impossible.io/v2/render/YOUR-PROJECT-ID \
  -H "Content-Type: application/json" \
  -d '{"movie": "welcome-video", "params": {"name": "Alex"}}' \
  | jq -r '.token')

# 2. Upload the render URL to Wistia
curl -X POST "https://upload.wistia.com/api/v1/medias" \
  -H "Authorization: Bearer YOUR-WISTIA-API-TOKEN" \
  -d "url=https://render.impossible.io/v2/render/${TOKEN}.mp4"

Wistia will fetch the video from the render URL and host it on their platform, giving you access to their analytics, heatmaps, and embed tools.

Using a direct URL:

curl -X POST "https://upload.wistia.com/api/v1/medias" \
  -H "Authorization: Bearer YOUR-WISTIA-API-TOKEN" \
  -d "url=https://render.impossible.io/v1/render/YOUR-PROJECT-ID/welcome-video.mp4?name=Alex"

Vimeo

Vimeo is a professional video hosting platform. Since Vimeo’s player only plays Vimeo-hosted content, the integration involves uploading your rendered video to Vimeo, then embedding it with their player.

Upload via the Vimeo API:

# 1. Render the video
TOKEN=$(curl -s -X POST https://render.impossible.io/v2/render/YOUR-PROJECT-ID \
  -H "Content-Type: application/json" \
  -d '{"movie": "welcome-video", "params": {"name": "Alex"}}' \
  | jq -r '.token')

# 2. Create a video on Vimeo with a pull URL
curl -X POST "https://api.vimeo.com/me/videos" \
  -H "Authorization: Bearer YOUR-VIMEO-ACCESS-TOKEN" \
  -H "Content-Type: application/json" \
  -d "{
    \"upload\": {
      \"approach\": \"pull\",
      \"link\": \"https://render.impossible.io/v2/render/${TOKEN}.mp4\"
    },
    \"name\": \"Personalized Video for Alex\"
  }"

Vimeo will pull the rendered video from the ImpossibleFX URL and host it. The response includes the Vimeo video URI which you can use to build an embed:

<iframe
  src="https://player.vimeo.com/video/VIMEO-VIDEO-ID"
  width="640"
  height="360"
  frameborder="0"
  allowfullscreen
></iframe>

Using a direct URL:

curl -X POST "https://api.vimeo.com/me/videos" \
  -H "Authorization: Bearer YOUR-VIMEO-ACCESS-TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "upload": {
      "approach": "pull",
      "link": "https://render.impossible.io/v1/render/YOUR-PROJECT-ID/welcome-video.mp4?name=Alex"
    },
    "name": "Personalized Video for Alex"
  }'