How to embed the Fliva Player on your website

It is easy to embed the Fliva Player on your website. All you need is our little javascript snippet, a dom node to place the player inside, and a tag or an id of the video you want to be embedded.

The script is located two places at the moment. It is placed at https://app.fliva.com/js/fliva_player.js and it is in a gist, which will be updated in sync with the aforementioned location. The gist version is used to let you see the iterations of the script, and to allow us to embed it here, so we can discuss exactly what it does for you.

This file creates a global object called Fliva. If you prefer not to have a global object, you need to copy the functionality into your build pipeline of choice.

There are three parts to this object. Event handling, commands, and embedding. We will get back to the former two at a later stage.

Embedding from a tag

In most cases, you will want to embed a file from a tag. This allows you to decouple your website code from our player platform. However, this requires that all – embeddable videos – have a unique tag.

This will embed an iframe into the div. And you’re pretty much done.

Selective embedding

One problem with the above approach is that you have to be sure that you have a video with that given tag hosted on our player platform. If there is no video present with that tag, your embedded iframe will show a 404 error.

One way to remedy this is to make a simple lookup for the video, before trying to embed it. You can do this by searching for the video by tag name, and get a result back in jsonp format.

The player div will only be filled with an iframe if a video with that specific tag exists. Now you can use CSS to hide the empty container.

Get more information.

Contact us now and learn more about how you can engage your customers through personalized and individual videos.