Quick start

There are a two methods to use the Clevercast Player:

• The most easy way to embed the player in your page is by adding an <iframe> with options as URL parameters. You can always find the embed code for your item, event or webcast in the Clevercast platform.
• When you need more control, you can use the JavaScript API. This enables you to listen for events and load new options dynamically.

Note about autoplay: most browsers do not allow content to play automatically with sound. When you enable autoplay, we strongly advise you to also enable muted. For more information, click here.

Examples

<iframe width="854" height="480" src="//player.clevercast.com/?account_id=Wjb45d&amp;item_id=VzzgGr" style="border: 0" allow="autoplay; fullscreen" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

<iframe width="854" height="480" src="//player.clevercast.com/?account_id=271mkz&amp;event_id=W9m0eR" style="border: 0" allow="autoplay; fullscreen" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

Using the API

HTML

<script src="//player.clevercast.com/js/api.min.js"></script>
<div id="player"></div>

JavaScript

When using the API, you can pass layout options. By default, a fixed width and height is used:

var player = new RMP({
	'id':			'player',
	'width':		854,
	'height':		480,
	'options': {
		'account_id':	'Wjb45d',
		// `item_id` for VOD
		// `event_id` for live
		// See options for more.
		'item_id':	'VzzgGr'
	}
});

Or, if you want the player to behave responsive (16 by 9), you can instead enable the responsive parameter:

var player = new RMP({
	'id':			'player',
	'responsive':		true,
	'options': {
		'account_id':	'Wjb45d',
		'item_id':	'VzzgGr'
	}
});

If you want the player to follow while the user scrolls down, you can enable the autoscrollspy parameter (requires responsive):

var player = new RMP({
	'id':			'player',
	'responsive':		true,
	'autoscrollspy':	true,
	'options': {
		'account_id':	'Wjb45d',
		'item_id':	'VzzgGr'
	}
});

Or, if you want the player to auto play when visible, you can enable the autoscrollplay parameter (requires responsive):

var player = new RMP({
	'id':			'player',
	'responsive':		true,
	'autoscrollplay':	true,
	'options': {
		'account_id':	'Wjb45d',
		'item_id':	'VzzgGr'
	}
});

Captions display

Please contact support or visit the price calculator for more information.

To add a separate captions display:

var captions = new RMCP({
	// Required.
	'id':	'captions',
	// The instantiated RMP object to attach to.
	'rmp':	player,
	// Optional.
	'options': {
		// The default captions language to open with (defaults to the first).
		'captions_default':	'su',
		// Basic styling of the captions.
		'color':		'red',
		'bg_color':		'green',
		'active_cue_color':	'turquoise',
		'active_cue_bg_color':	'darkblue',
		'font_family':		'Tex Gyre Pagella',
		'font_size':		'1.5rem',
		// Whether to show the caption language selection.
		'show_select':		true,
		// Custom CSS can be used for complete control.
		'custom_css': `
			body {
				padding: 1rem;
			}
		`,
	}
});

Methods

Events

Example

Options

* Can only be set when "Allow Ad URL Override" is enabled for your player in Clevercast, this is disabled by default.

• Quick start
• Examples
• Using the API
  Captions display
• Options