How to Apply a Sideview Player Extra to Your Player

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

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

    NUI_Sideview_001.jpeg

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

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

    NUI_Sideview_002.jpeg

  4. Go to the 'SETTINGS' area in the 'SIDEVIEW' configuration tab and 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.

    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 Tablets

    Optional: Clicking this field and setting it to True will disable the Sideview Extra from applying to tablet devices.

    Note: The default is false.

    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 ‘transitionType’ 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 ‘fadeInOutOnTransitionColor’ field) during a transition animation.

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

    Note: To define the transition fade color, please see fadeInOutTransitionColor field

    Fade In Out On Transition Color

    Optional: Enter a valid CSS3 color value for the Floated player’s transition background. This color is only revealed if the fadeInOutOnTransition option is applied.

    Note: This color will be displayed only if the ‘fadeInOutOnTrasition’ 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: Clicking this field and selecting True will reverse the default transition type animation rotation.

    Note: This option only applies if an animated ‘transitionType’ is selected (such as: Slide, Spin, Horizontal/Vertical Flip). Note: The default rotation directions are noted in the ‘transitionType’ 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 it's transition animation when reaching the banner.

    Note: The default position is 0px;

    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 0px;

    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 0px - disabled

    Show Dock Button

    Optional: Click on this slider to display a manual dock/undock button to 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 it's 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 it's 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 0 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



    NUI_Sideview_003.jpeg
  5. Go to the 'POSITION MANUALLY' area under the 'SIDEVIEW' configuration tab and 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 destinationElementId field).

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

    Note: The default position is Right.

    Horizontal margin
     

    Optional (only when no DestinationElementId 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 ‘destinationElementId’ 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  20px. 
    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 destinationElementId 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 20px;

    Floating player size: W

    Optional (only when useDestinationElementWidth is set to False):

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

    Note: This field will only apply If the ‘destinationElementId’ is left blank or the ‘useDestinationElementWidth’ field is set to False.

    Note: The default width is 320px.

    Floating player size: H

    Optional (when maintainAspectRatio is set to False):

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

    Note: This field will only apply if the ‘maintainAspectRatio’ is field is set to False.
    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.






    NUI_Sideview_004.jpeg

  6. Go to the 'POSITION USING PAGE ELEMENT' area under the 'SIDEVIEW' configuration tab and apply the required fields according to the following table:

    Field Name Description
    Destination element

    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 elements 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 ‘destinationElementId’ field:

    side_rail

    Use destination element width

    Optional: Clicking this field and setting it to True will cause the Sideview Player to inherit the width of the selected destination element. If this field is set to False, the Sideview Player will use the custom value entered in the Width field.

    Note: This option will only apply if a ‘destinationElementId’ 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.

     
    Maintain aspect ratio Optional: Clicking this field and setting it to True will automatically calculate the Sideview Player’s height according to the selected width and the player’s aspect ratio.



    NUI_Sideview_005.jpeg

  7. Optional: Go to the 'CLOSE BUTTON' area under the 'SIDEVIEW' configuration tab and apply the required fields according to the following table:

    Note: All of the fields below only apply if the ‘showCloseButton’ 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 it's original position when it is in the browser viewport.

    • Visible (1) - A close button will appear always on the Sideview player allowing you to close it.

    • Visible on hover (2) - A 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 it’s 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 16px.

    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 1px.

    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 16px.
    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.

    Note: The opacity will revert to 1.0 when



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