Skip to content

How to embed and configure the player?

Clevercast Player is embedded using an iframe (inline frame), containing all information which the player needs to retrieve the necessary data to display both itself and the resource. You can also use the Player API to instantiate the player and/or modify its behavior.

The embedded player will behave in the same way as the public player in Clevercast, including automatically detecting status changes and failover to the backup broadcast.

Every live event or VoD item has a player profile which determines the way the embedded player looks and behaves. You can create a custom player profile, or override its behaviour by adding certain properties to the embed code.

Important: if you want the video stream to start playing automatically in the embedded player, you should also make sure that the player's audio is muted initially. See the autoplay section of our FAQ on why this is necessary. To do this, the autoplay and muted properties of your player profile must both be set.

Embedding the player

To display a VoD item, playlist or live event on your website or (3rd party) platform, just copy the (responsive) embed code or direct link from Clevercast.

The default embed code has a fixed width and height, based on the highest resolution of your live stream (which you can change in the embed code). Alternatively, you can also copy a responsive embed code.

For embedding the player in 3rd-party platforms like Swapcard, you will usually need the direct link. If you’re not sure, ask the 3rd-party platform’s support team (it depends on their implementation).

Important:

  • Our player requires the domains *.clevercast.com and *.rambla.be to be accessible. In some cases, they may have to be whitelisted by a firewall or 3rd party platform.
  • Exceptionally, 3rd party platforms may require the query-string arguments in the direct link to be separated by the char entity &_ (instead of &)
  • Some CMS or platforms may change embed code, like the & character. In those cases, it is often sufficient to replace & with &, making the URL the same as the "direct link".

You can still change the properties of the live event or the player profile after you've copied the embed code; the embedded player will automatically reflect your changes. The embedded player also sends requests to update Clevercast analytics. This way, it allows you to see real time analytics for both on-demand and live video.

Customizing the embed code

You can further customize the embed code by adding options to its 'src' element. Go to the Event section of the Player API docs and look for the available options. For example, to set the French audio and caption language to be automatically selected when the player is rendered, you can add the following to your embed code: &audio_default=fr&captions_default=fr&captions_default_show=1.

Note: if you use the direct link to embed the player in a third-party platform, use an ampersand ('&') instead of an HTML entity ('&') to separate these options.

Using the JavaScript API

You can also the Player API to instantiate the player, or to change its outlook and behaviour programmatically.

Player profiles

Player profiles let you customize the appearance (e.g. color scheme, presence and size of the controls, logo overlay…) and behavior (e.g. autoplay, muted, support for Chromecast and Apple TV…) of your embedded player.

Default and custom profiles

Each event and item in Clevercast has a player profile. When your account is created, it contains two default player profiles:

  • Default Live: By default used for live events, with 'autoplay' and 'muted' turned on, and no pause button. If you want the pause button to be available for live streams, you should set ‘Hide Pause Button‘ to ‘No‘ in the player profile.
  • Default: by default used for VoD items, with 'autoplay' and 'muted' turned off. The pause button is turned on.

You can change these default profiles to a certain extent. Just go to their detail page and make the necessary changes. Note that if you enable autoplay, you should also set the player to muted.

You can also create your own player profile via the ‘Media > Players’ menu. This way you can create player profiles for different purposes, and select them on your items, playlists and events pages.

Choosing the profile for a Live Event or VoD Item

Via the Account > Settings page, you can select the player profile which is used by default for new live events and workflow profiles (VoD).

On the event and item detail pages, you can select the player profile for a specific event and item. When you do this, you will immediately see the changes in the embedded player (and in the player on the detail page).