MyCujoo LiveServices logo
HomeProductsPricingHelp Center
Create your accountSign in
Sign In




Help Center


Product & Features

Getting started


API Documentation

Configuring the web embed

The MCLS web embed offers an easy way to integrate our video player—and additional features—into your own website. There are two ways to include the MCLS embed on your website, using either the standard method or the legacy method.

Standard method (recommended)

The standard method uses an HTML <script> tag and a <div> tag, and looks something like this:

<script async src=""></script> <div data-embed-id="EVENT_ID" data-public-key="PUBLIC_KEY" data-default-volume="1" data-show-fullscreen="false" style="width: 560px; min-height: 315px; background: #000;"></div>

The advantage of this method is that it allows two-way communication between between your webpage (i.e. the parent) and the MCLS embed (i.e. the child). This is especially advantageous in more advanced use-cases, e.g. when you want to get notified of certain events happening inside of the video player, such as when a stream has ended.

Tip: if you want to embed more than one video player on a single page, you only need to include the <script> tag once.

Legacy method (not recommended)

The legacy method uses an HTML <iframe> tag, and looks something like this:

<iframe src="" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

This approach is generally not recommended because it cannot support all features that MCLS has to offer. However, we understand that you may be restricted from using the first approach, e.g. if you are not permitted to place <script> tags on your webpage, or if you are using a CMS and can only copy/paste an iframe URL into it.

Customising the experience

The MCLS web embed can be tailored to your needs, and this is done through parameters. Using the standard methods, these parameters are configured as properties of the <div> tag, using a data- prefix, followed by the name of the parameter. In the previous section, you can see data-show-fullscreen="false" as an example. When using the legacy method, these parameters are passed as URL parameters, and use lowerCamelCase. In the previous section, you can see showQualitySelector=true as an example.

What follows is a full list of available parameters, showing Standard/Legacy method parameter names.


  • data-embed-id / eventId - string

  • data-public-key / publicKey - string


  • data-autoplay / autoplay - boolean (true/false)

  • data-primary-color / primaryColor - string. Should be an RGB hexadecimal color code, e.g. #FF0000

  • data-default-volume / defaultVolume - float. Should be a value between 0-1 (0 for mute, 1 for 100%)

  • data-start-position / startPosition - float. Should be a value in seconds for the position where the video should start playing from.

  • data-ad-unit / adUnit - string (the iu query parameter from the IMA tag url)

  • data-ad-cust-params / adCustParams - string (url encoded values or valid json representing the custom parameters that should be added to the IMA tag url in the query parameter cust_params)

  • data-show-back-forward-buttons / showBackForwardButtons - boolean (true/false)

  • data-show-info-button / showInfoButton - boolean (true/false)

  • data-show-live-viewers / showLiveViewers - boolean (true/false)

  • data-show-seekbar / showSeekbar - boolean (true/false)

  • data-show-fullscreen / showFullscreen - boolean (true/false)

  • data-show-quality-selector / showQualitySelector - boolean (true/false)

  • data-show-volume / showVolume - boolean (true/false)

  • data-show-timers / showTimers - boolean (true/false)

  • data-show-chromecast / showChromecast - boolean (true/false)

  • data-show-picture-in-picture / showPictureInPicture - boolean (true/false)

  • data-identity-token / identityToken - string. Should be a JWT token for the mcls api

  • data-live-tolerance / liveTolerance - number of seconds. Number of seconds behind live that the video needs to be before being considered non-live. Note that this will only be used when playing at the live edge. Defaults to 15.

  • data-limit-auto-quality-to-player-size / limitAutoQualityToPlayerSize - boolean (true/false); If true, the player automatic quality selection will not choose a rendition that is larger than the player dimensions. Defaults to true.

  • data-plugin-config / pluginConfig - string (valid json representing various plugin configuration; currently only available for MUX; eg: '{"mux":{"debug":true}}' )

  • data-analytics-type / analyticsType - 'mux' / 'youbora'

  • data-analytics-account / analyticsAccount - string (youbora or mux account ids)

  • data-analytics-custom-params / analyticsCustomParams - string (url encoded values or valid json representing the analytics custom parameters or custom dimensions)

  • data-analytics-user-id / analyticsUserId - string (analytics pseudo user id)

Callback events:

Passing parameters is a one way communication, from your webpage to the embed. To enable the communication from the embed, to your webpage, custom events are fired on the <div> tag corresponding to each embed.

  • timeUpdate - The event is fired when the current playback position (currentTime) or the total duration (totalTime) of the embed video has changed. See an example of timeUpdate setup here.

  • viewChange - The event is fired when the view displayed by the player changes. The possible view options are:

    • NOT_FOUND - passed when the public key and event id combination is invalid or when the domain   where the player is hosted is not valid for your organisation

    • GEOBLOCKED - passed when the event geoblocking settings are not valid from the country the request was made

    • AUTHORIZATION - passed when the event is behind a paywall and the current user (identityToken) does not have access to the event

    • CONCURRENCY_LIMIT - passed when the number of simultaneus sessions for watching an event by a user (identityToken) has been reached

    • UPCOMING - passed when the event stream has not started yet

    • VIDEO - passed when displaying the video player

    • LOADING - passed when showing a spinner

Read more about how to implement a more advanced Zoid Player Component.