Docking the Sideview Player to the Browser's Viewport

When a destination element is not specified (using the destinationElementId field), the Sideview Player will dock to the browser’s viewport.

In the following example, you can see that the Sideview Player is not aligned to any element but is actually positioned in relation to the Top and Right browser viewport sides.

Enabled Options

When a destination element is not specified, the following options are enabled:

hAlignPostion - As there is no element to dock to, you are able to define the horizontal position of the Sideview Player from the selected hAlign side (either: left/right), of the viewport.

width - as there is not element to inherit the width definition from, you can enter a custom width for the Sideview Player. If no width is entered the Sideview Player will default to 320px.

Ignored Options

When a destination element is not specified, the following options are disabled:

useDestinationElementWidth - This option cannot be used as the player doesn't have a definition element to inherit the width from.

Viewport Docking Examples

Example 1

In the following example we have defined the following:

destinationElementId- blank: we have not specified an element ID.

width- 400: This field is set to a width of 400px.

hAlign- Left: This field is set to Left, meaning the Sideview Player will dock to the Left border of the browser’s viewport.

vAlign- Top: This field is set to Top, meaning the Sideview Player will dock to the top border of the viewport.

vAlignPosition- 40: This field is set to a position of 40px from the top of the viewport (the hAlign definition).

hAlignPosition- 40: This field is set to a position of 40px from the left side of the viewport (the vAlign definition).

The result is the following:

Note: The Sideview Player is not confined to the placeholder background area as it might be suggested by the above image. In this example, the Sideview Player is docked to the Top - Left side of the browser viewport.

Example 2

In the following example we have defined the following:

destinationElementId- blank: we have not specified an element ID.

width- blank: This field has not been defined and therefore default to 320px.

hAlign- Right: This field is set to Right, meaning the Sideview Player will dock to the right border of the browser’s viewport.

vAlign- Bottom: This field is set to Bottom, meaning the Sideview Player will dock to the bottom border of the viewport.

vAlignPosition- 100: This field is set to a position of 40px from the bottom of the viewport (the hAlign definition).

hAlignPosition- 200: This field is set to a position of 40px from the right side of the viewport (the vAlign definition).