Quick Start: Creating and Styling a Player

Product(s)
Video Cloud
Role(s)
Studio User
Player Developer
Task(s)
Create & Configure Players
Topic(s)
Styling

The objective of this Quick Start is for you to be able to create and style players using the Players module.

After completing this Quick Start you should be able to:

  • Create a player
  • Style a player

Creating players

The Players module is used to create and style players. Once inside the Players module, click New Player and then enter a name for the player. Click on the player name to set the player properties. There are numerous player properties that can be configured to customize the look and feel of the player:

  • Player Information - Used to view the player version number and to customize the player name and short description
  • Styling - Used to select a player type, play button shape and position, colors and configure a logo overlay
  • Playback - Used to configure playback settings
  • Controls - Used to display a quality selector and fullscreen control for the player
  • Social - Used to configure the social sharing options for the player
  • Plugins - Used to configure player plugins
  • End Screens - Used to configure what is displayed when a video ends
  • Advertising - Used to configure player advertising
  • Content Restriction - Used to restrict the videos within a player to show only in specified domains

The following video tutorial will give you an overview of the Players module.

 
 

Styling players

The styling properties can be used to configure the:

  • Player type
  • Play button shape and position
  • Icon, progress bar and background colors
  • Logo overlay

To access the styling properties, click on the player name and click Styling in the left navigation menu.

To change a color:

  1. Click a color picker.
  2. Click a color on the right side of the control.
  3. Click in the square to select a shade of the desired color. A color can also be set by entering a hex color code into the text control.

A logo overlay is an image that will appear over the player. A sample overlay is shown below.

After making any changes to a player, you must publish the changes by clicking Publish & Embed > Publish Changes before the changes will appear in published players.

Hands-on Task: Creating and styling a player

In this task you will create and style a player.

Create a new player

  1. In Video Cloud Studio, click Players to open the Players module.
  2. Click New Player.
  3. Enter Custom Player for the name and click Save.

Style the player

  1. Click the Custom Player link to open the player properties.
  2. Click Styling in the left navigation menu.
  3. The Player Type should be a single video player.
  4. Check Show title and description.
  5. Select a Play Button Shape and Play Button Position.
  6. Click the Main color selector and set the color to a shade of red.
  7. Confirm that the color changes are reflected in the preview player.
  8. Click Publish & Embed > Publish Changes to publish the changes.