Understanding How the Player is Structured (Background, Foreground, Video Content, Player Size and Controls)


This article explains the following topics:

Player Layering Logic

The following illustration explains how the player is layered using the Background, Foreground, Video Content and Player Controls. These four 'layers' are the main graphic definitions that can be applied to your player.




Note: The following explanation describes the player layers from bottom to top.

  • Player size - (Highlighted in orange) This is the base layer for all the other layer elements.
  • Background - (Highlighted in green) This allows you to set a filling image for the inner area of the Player size.
  • Video content - (Highlighted in blue) This is the actual area where videos and ads (if configured) are played. The size of the video location can be in any size or position, but it will be hidden if it exceeds the Player size.
  • Foreground - (Highlighted in yellow) This is a layer that appears above the Player size, Background skin and Video location. This is commonly used for overlay with your player or to create a custom border to make the player look nice.
  • Player controls - (highlighted in red) These are the last layer above all the others. The controls are the interaction component that viewers use to play, pause and skip through the video playback.


What does 'Video Overtake Image' do?

The 'Video overtakes image' slider is available in the Player Wizard under the 'LOOK & FEEL' tab -> 'FOREGROUND FRAME & LOGO' area. Selecting this option will override the layer position of the Foreground image, and move the 'Video Content' layer above it. This will allow your Video content (where the actual video is played back in) to be visible although you have applied a Foreground skin.

See the following diagram to understand the differences:



Have more questions? Submit a request