Applying Player Controls Options using the Player Template Wizard

What are the Player Controls in the Player Template Wizard?

The player controls tab in the Player template wizard is responsible for displaying the controls bar element on all the players associated to this template. The controls bar allows you to play/pause, skip to a specific time using the playback timeline navigation and control other options such as: volume settings and switching to full screen mode. There are many control types to choose from, that allow you to define your player's look-and-feel according to your requirements. 


Note: Player controls are always displayed on top of the video location in the player. In most of our controls, an 'auto-hide' capability is applied, causing the controls to be hidden when the mouse cursor is not moving on top of the player <div>.
For further details see, Understanding how the player is structured.


Customizing the Player Controls in the Player Template Wizard

To customize the player controls in the player template, perform the following steps:

  1. Access the Player template wizard by editing an existing player template or creating a new one.


  2. Go to the 'LOOK & FEEL' tab.


  3. Under the 'LOOK & FEEL' tab, scroll down to the 'PLAYER CONTROLS' area.

  4. Optional: Click on 'More settings' to display all the available fields under this area.


  5. Apply the required options according to the following table:

    Field Name Description
    Controls Options

    Select the required player controls you want to apply to the player according to the following options:

    • Airy
    • Modern
    • Haymarket
    • Minimalist
    • Dark

    Note: Our promoted 'controls' options include a preview image for easy selection.

    MORE CONTROLS Click on this field to search and select other player controls that are available to your company.
    AUTO POSITION Selecting this toggle will automatically position the controls on the player without needing to change any control location or size values. If you want to manually set this, deselect this slider.
    CONTROLS COLOR Enter a hexadecimal color code or click on the color box to select a color for the Player controls. This color will highlight the player progress bar and contours of player interface icons.
    CONTROLS ALPHA Click and drag the value slider or enter a number between 0.0 to 1.0 to define transparency level of the colored background area behind the player controls. 0 = transparent, 1= fully visible.
    LOGO URL Enter a URL address of an image or logo you would like to display within the controls bar. This field supports .png files. Any image you choose will be downsized to 32x32 pixels for optimal display in the controls bar.

    Note: Make sure that the image you are using has a transparent background in order to blend in with the controls.
    LOGO CLICK URL Enter a click-through URL address to which viewers will be redirected to when clicking on the controls bar logo.
    CHROMELESS Select this slider to control and hide the control bar's visibility when the user mouses over the player.

  6. Click on 'SAVE'. Your player controls are saved and applied to this player template.

    Note: The Player template wizard will show you a preview of your current changes while customizing the player.

    Note: After saving a player template, please see How to assign a Player template to a player.
Have more questions? Submit a request