Viewability Threshold examples

The percentViewabilityThreshold field allows you to set a custom threshold that defines how much of the player's original location size is required to be displayed before triggering the transition animation to the Sideview player location.

The following diagrams and examples explain how this field operates.

 

Understanding the Main Elements

The basic concept is that when a player's original location reaches either the top or bottom boundries of the browser's viewport, the transition animation will trigger and the player will move to it's Sideview position (the minimized player).

In this diagram we can see a basic layout of a web page that is highlighted in green. In this case (as in most implementations), the web page is larger than the what the browser viewport can display. The red section represents the browser's viewport which is the area of the web page that is visible to viewers. The blue rectangle represents the player's original location where we have embedded our player.

  

 

 

100% Viewability Setup (Default)

The default setting for the Sideview player is 100% (meaning that the percentViewabilityThreshold is set to 100). In this case, only when 100% of the player's original position is displayed within the browser's viewport, the player will maintain its original position. If less than 100% of the player's original position is displayed in the browser's viewport, the transition animation will trigger and the player will move to it's Sideview position.

In other words, when at least 1 pixel of the player's original position is hidden, the player will move to it's minimized position.

 

Description Example
 

When at least 1 pixel of the player's original position is hidden, the player will move to it's minimized position.

 

 

 

70% Viewability Setup (Custom Example)

When the Sideview player is set to 70% viewability (meaning that the percentViewabilityThreshold is set to 70), this means that when at least 70% of the player's original position is displayed within the browser's viewport, the player will maintain its original position. If less than 70% of the player's original position is displayed in the browser's viewport, the transition animation will trigger and the player will move to it's Sideview position.

In other words, when 30% or more of the player's original position is hidden, the player will move to it's minimized position.

 

Description Example

When 30% or more of the player's original position is hidden, the player will move to it's minimized position.

 

 

0% Viewability Setup (Custom Example)

When the Sideview player is set to 0% viewability (meaning that the percentViewabilityThreshold is set to 0), this means that when at least 1 pixel the player's original position is displayed in the browser's viewport, the player will maintain its original position. If none of the player's original position is displayed in the browser's viewport, the transition animation will trigger and the player will move to it's Sideview position.

In other words, when the player's original position is completely hidden, the player will move to it's minimized position.

 

Description Example

When the player's original position is completely hidden, the player will move to it's minimized position.

Have more questions? Submit a request