Applying Sideview Player Extra Using the Player Template Wizard

To apply Sideview to your player template, perform the following steps:

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

    Player_Template_Sideview_1501.jpg

  2. Under the 'BASIC INFO' tab, select the 'SIDEVIEW' slider. The sideview functionality is applied to your player template.

  3. Optional: Click on 'Settings' to configure your sideview settings. The sideview configuration tab is displayed.

    Player_Template_Sideview_1502.jpg

  4. Optional: Under the 'SETTINGS' area, click on 'More settings' to display all the available fields.

    Player_Template_Sideview_1503.jpg

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

    Field Name Description
    ENABLE

    This slider is identical to the 'Sideview' slider that appears in the 'BASIC INFO' tab and is responsible for activating or disabling the Sideview functionality on this player template.

    PLACEHOLDER BACKGROUND COLOR Optional: Enter a hexadecimal color code or click on the color selector to choose a color for the player's original location background placeholder.
    DISABLE ON MOBILE DEVICES

    Optional: Selecting this toggle will disable the Sideview Extra from applying to mobile devices.

    Note: This toggle is inactive by default.

    TRANSITION TYPE

    Optional: Click on this field and select the required transition animation that will appear when the Player moves to the Sideview  position, according to the following options:

    • None - The player immediately jumps to the configured position without any animation.
    • Slide - The player slides to the configured position without turning or flipping.
    • Spin - The player spins 360°clockwise to the configured position.
    • Horizontal flip - The player rotates 360° horizontally spinning from left to right while moving to the configured position.
    • Vertical flip - The player rotates 360° vertically spinning from bottom to top while moving to the configured position.

    Note: To see animation option examples, please see Transition animation types.

    Note: The default type is Slide.

    TRANSITION DURATION

    Optional: Enter a numeric value in seconds that will define the total duration time of the transition animation. This defines how long the animation will take to move the Player from its original location to the configured, sideview position.

    Note: This option applies only if an animated Transition Type is selected (e.g. Slide, Spin, Horizontal/Vertical Flip).

    Note: The default value is 0.4 Seconds.

    FADE IN OUT ON TRANSITION

    Optional: Selecting this slider will fade the player out/in a selected color (defined by the Fade In Out On Transition Color field) during a transition animation.

    Note: This field does not apply when the Transition Type is set to ‘None’ or on tablet devices nor IE9.

    Note: To define the transition fade color, please see Fade In Out Transition Color field

    FADE IN OUT ON TRANSITION COLOR 

    Optional: Enter a valid CSS3 color value for the Floated player’s transition background.

    Note: This color will be displayed only if the Fade In Out On Trasition option is applied.

    Note: This field accepts any CSS3 color value, such as: RGB, RGBA, Hexadecimal color code etc. For further details, please see CSS background color property.

    REVERSE ROTATION

    Optional: Selecting this toggle will reverse the default transition type animation rotation.

    Note: This option only applies if an animated Transition Type is selected (such as: Slide, Spin, Horizontal/Vertical Flip).

    Note: The default rotation directions are noted in the Transition Type field description.

    FLOATING REGION TOP BOUNDARY

    Optional: Enter a numeric value in pixels to define a top boundary offset space for website banners or headers. This field allows you to define a custom boundary that is offset from the top border of the browser's viewport that will trigger the Sideview player transition animation.

    Example: Let's assume your website has a top banner with a height of 50px that stays fixed when scrolling down in your website.
    In this case, you wouldn't want the player to hide behind the banner when the viewer scrolls down to the player's location before triggering the Sideview player's transition animation. 

    Using this field you can define a lower top boundary (in this case we'll set it to the banner's height 50px). This allows the Sideview player to trigger its transition animation when reaching the banner.

    Note: The default position is 0 px.

    FLOATING REGION BOTTOM BOUNDARY

    Optional: Enter a numeric value in pixels to define a bottom boundary offset space for website banners or footers. This field allows you to define a custom boundary that is offset from the bottom border of the browser's viewport that will trigger the Sideview player transition animation.

    Example: Let's assume your website has a top footer with a height of 50px that stays fixed at the bottom of the page when scrolling up or down in your website.
    In this case, you wouldn't want the player to hide behind the footer when the viewer scrolls up beyond the player's location before triggering the Sideview player's transition animation. 

    Using this field you can define a higher bottom boundary (in this case we'll set it to the banner's height 50px). This allows the Sideview player to trigger it's transition animation when reaching the footer.

    Note: The default position is 0 px.

    STICK TO TOP SCROLL DISTANCE

    Optional: Enter a numeric value in pixels. This value defines the distance the viewer will need to scroll (beyond the point where the player reaches the top of the viewport) before the Player moves to the configured Sideview Player position.

    When a value larger than 0 is entered, the embedded player will stick to the top of the viewport when it reaches it. The player will maintain its original size until the viewer scrolls beyond the defined value.

    The Player will remain “stuck” to the top of the window until the defined distance is reached (the value entered in this field) at which point it will move to the Sideview Player’s configured location using the specified transition options.

    Example: If your player is located in the middle of the screen, setting this field to 1000 will first cause the full size player to stick to the top and middle part of the browser’s viewport when you reach it, and only transition it to its configured size and location after scrolling an additional 1000px. Note: You may enter 0 to disable this feature and transition the player immediately upon reaching the top of the viewport.  

    Note: The default value is 0 px - disabled.

    SHOW DOCK BUTTON

    Optional: Select this toggle to display a manual dock/undock button on your sideview player.

    Note: Clicking on the manual dock button on the original player location will cause the player to move to its minimized location. The minimized player will display an undock icon that when clicked will revert the player back to its original location. 

    PERCENT VIEWABLE THRESHOLD

    Optional: Enter a numeric value in percent (between 0 to 100) to define how much of the player's height is required to be visible within the browser's viewport to maintain it's original position.
    If equal or less % of the player is visible within the browser's viewport (crossing the defined threshold), the transition animation will trigger and the player will move to its Sideview position.

    • 0 = 0% viewability of the player's original location -  This means that the transition animation will trigger when all of the player's original location is hidden from the browser's viewport.

    • 100 = 100% viewability of the player's original location -  This means that the transition animation will trigger when at least 1 pixel from the player's original location is hidden from the browser's viewport.

    Example: Let's say we would like to trigger the transition animation only when 30% of the player is hidden beyond the browser viewport. In this case we would set the percentViewableThreshold to 70 [100% - 30% (hidden) = 70% (visibility)].

    This means that when we scroll up or down the page and less than 70% of the player's original location is visible, the transition animation will trigger.

    Note: For further details, please see Viewability Threshold examples.

    Note: The default is 100 percent.

    SHOW EXTRAS Optional: Selecting this slider will enable your Sideview player to work with additional player extras such as the Related videos pane. This will display the related pane when the original player embed is displayed, and show only the player area when the sideview player moves to its destination position.


    Player_Template_Sideview_1504.jpg

  6. Scroll down to the 'POSITION MANUALLY' area.

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

    Player_Template_Sideview_1505.jpg

  8. Apply the required fields according to the following table:

    Field Name Description
    HORIZONTAL ALIGNMENT

    Optional: Click on this field and select the required Sideview Player’s horizontal alignment according to the following options:

    • Left
    • Right

    This will dock the Sideview Player relative to the selected side of either the browser’s viewport or a destination element (if defined in the Destination Element ID field).

    Note: For further details, please see Configuring sideview player position.

    Note: The default position is Right.

    HORIZONTAL MARGIN
     

    Optional (only when no Destination Element ID is specified):

    Enter a numeric value in pixels to define the spacing of the Sideview Player in relation to the selected horizontal alignment position (left/right). This field allows you to define the distance of the Sideview Player and the selected border in pixels.

    Note: This field is ignored when a valid Destination Element ID is specified (in which case the player will align itself with the container’s left or right edge - according to hAlign definition).

    Note: The default value is  20 px. 
    VERTICAL ALIGNMENT

    Optional: Click on this field and select the required Sideview Player’s vertical alignment according to the following options:

    • Top
    • Bottom

    This will dock the Sideview Player to the selected side of either the browser’s viewport or a destination element (if defined in the Destination Element ID field).

    Note: For further details, please see Configuring sideview player position.

    Note: The default position is Top. 
    VERTICAL MARGIN

    Optional: Enter a numeric value in pixels to define the spacing of the Sideview Player in relation to the selected vertical alignment position (top/bottom). This field allows you to define the distance of the Sideview Player and the selected border in pixels.

    Note: This field applies in relation to both the browser’s viewport and a destination element if defined.

    Note: The default position is 20 px.

    FLOATING PLAYER SIZE: W

    Optional (only when Use Destination Element Width is deactivated):

    Enter a numeric value in pixels to define the width of the Sideview Player.

    Note: This field will only apply if the Destination Element ID is left blank or the Use Destination Element Width is deactivated.

    Note: The default width is 320 px.

    FLOATING PLAYER SIZE: H

    Optional (when Maintain Aspect Ratio is deactivated):

    Enter a numeric value in pixels to define the height of the Sideview Player.

    Note: This field will only apply if the Maintain Aspect Ratio field is deactivated.

    Note: The default height is 180 px.

    Z-INDEX

    Optional: Enter a numeric value to define the Sideview Player’s stack order.

    Note: This option is useful for resolving issues of overlapping layers in your page.

    Note: The default value is 999999.


    Player_Template_Sideview_1506.jpg

  9. Scroll down to the 'POSITION USING PAGE ELEMENT' area and apply the required fields according to the following table:

    Field Name Description
    DESTINATION ELEMENT ID

    Optional: Enter an ID of an element within your web page to dock the Sideview Player to it. If this field is left blank, the Sideview Player will position itself relative to the browser’s viewport. 

    Note: The Sideview Player does not embed itself into the element. It only uses the element's location to align itself to it.

    Note: When trying to align the Sideview Player to an element within a side-bar/column it is recommended to select the element ID within the side-bar/column.

    Example: Say the following element is located in you web page:

    <div id=”side_rail”></div>

    In this case you should enter the following ID in the Destination Element ID field:

    side_rail

    USE DESTINATION ELEMENT WIDTH

    Optional: Selecting this toggle will cause the Sideview Player to inherit the width of the selected destination element. If this toggle is inactive, the Sideview Player will use the custom value entered in the Width field.

    Note: This option will only apply if a Destination Element ID is defined.

    Note: If you wish to make the Sideview Player larger/smaller than the destination element, make sure this field is set to False and provide a custom value using the Width field.

    Note: To learn more, please refer to the Width field.

    Note: This toggle is active by default.

     
    MAINTAIN ASPECT RATIO

    Optional: Selecting this toggle will automatically calculate the Sideview Player’s height according to the selected width and the player’s aspect ratio.

    Note: This toggle is active by default.


    Player_Template_Sideview_1507.jpg

  10. Optional: Scroll down to the 'CLOSE BUTTON' area and apply the required fields according to the following table:

    Note: All of the fields below only apply if the Show Close Button field is set to True.

    Field Name Description
    VISIBILITY

    Optional: Enter a numeric value from 0 to 2 to select the relevant close button visibility setting according to the following options:

    • Hidden (0) - The close button will not be displayed, and therefore the Sideview player will only revert to its original position when it is in the browser viewport.
    • Visible (1) - The close button will appear always on the Sideview player allowing you to close it.
    • Visible on hover (2) - The close button will appear when you hover over the Sideview player allowing you to close it.

     

    Note: Clicking the close button pauses the video and sends the player back to its original location and size.

    DIAMETER

    Optional: Enter a numeric value in pixels to define the close button’s circle diameter.

    Note: The diameter must exclude the width of the border line value. For further details, please see Close button diameter calculation.

    Note: The default diameter is 16 px.

    BACKGROUND COLOR

    Optional: Enter a valid CSS3 color value that will apply to the Close Button’s background.

    Note: This field accepts any CSS3 color value, such as: RGB, RGBA, Hexadecimal color code etc. For further details, please see CSS background color property.

    Note: The opacity of this color is set by default to 0.85 by the following ‘opacity’ field. When hovering over the Close Button element, the opacity will change
    to 1. For further details, please see the Opacity field.

    Note: The default color is #222 (gray).

    BORDER COLOR

    Optional: Enter a valid CSS3 color value that will apply to the Close Button’s border line.

    Note: This field will only apply if the ‘borderWidth’ field is set to a value of 1px and above. Otherwise the border line is not visible.
    Note: This field accepts any CSS3 color value, such as: RGB, RGBA, Hexadecimal color code etc. For further details, please see CSS background color property.

    Note: The default color is #111 (gray).

    BORDER WIDTH

    Optional: Enter a numeric value in pixels to define the width of the close button’s border line.

    Note: If this field is set to a value lower than 1px, the border line (including borderColor) won’t be visible.

    Note: The default border line width is 1 px.

    X SIZE

    Optional: Enter a numeric value in pixels to define the font size of the ‘X’ symbol located in the Close Button.

    Note: The default size is 10 px.
    X COLOR

    Optional: Enter a valid CSS3 color value that will apply to ‘X’ symbol located in the Close Button.

    Note: This field accepts any CSS3 color value, such as: RGB, RGBA, Hexadecimal color code etc. For further details, please see CSS background color property.
    X SHADOW COLOR

    Optional: Enter a valid CSS3 color value that will apply to ‘X’ symbol’s shadow located in the Close Button.

    Note: If you do not want to use this option please enter ‘transparent’ in this field.

    Note: This field accepts any CSS3 color value, such as: RGB, RGBA, Hexadecimal color code etc. For further details, please see CSS background color property.

    OPACITY

    Optional: Enter an opacity value from 0.1 to 1.0 that will apply to the Close Button.



  11. Click on 'SAVE'. Your sideview functionality is saved and applied to the player template.
Have more questions? Submit a request