Custom UI

This is only apply for Advance Embed Code, not for iframe code

How to use?

The sample HTML page below creates an embedded player that will load a entity with custom controls/UI

<!DOCTYPE html>
    <!-- Include UIZA library. -->
    <script src=''></script>

    <!-- The video player will prepend the player into this <div> tag. You should create css style for this tag -->
    <div id='player'>
      <!-- You can define any HTML tag into here and create css style for those as your UI -->
      <div class='controls'>
        <div class='button' onclick='/*do something with player playback API*/'>Play/Pause</div>
        <div class='button' onclick='/*do something with player playback API*/'>On/Off fullscreen</div>
        <!-- and more... -->

      // This code creates an UIZA player without controls, and return the player for the callback
        '#player', // player element, exp: #element_id, .element_class
          api: btoa('YOUR_DOMAIN_API'),
          appId: 'YOUR_APP_ID',
          playerVersion: 4, // you are using the newest player, the version is: 3
          entityId: 'YOUR_ENTITY_ID',
          width: '100%', // player width, percentage or pixel, exp: '400px'
          height: '100%', // player height, percentage or pixel, exp: '200px'
          controls: false, // to hide the player's controls
        function(player) {
          // You can add event listeners at here
          player.on('play', function() {
          player.on('pause', function() {


Player playback API

Player Event