SundaySky Player—Full List of Player Attributes

Note:
The attributes specified in this article are supported only when embedding the player code using JavaScript.


This article details all the player attributes supported by the SundaySky player.
Note that the following attributes can also be configured using the Embed Code Builder:


Player Customization Attributes

aspect-ratio cta-highlight default-error-message
play-button-color play-button-large play-button-rectangle
playsinline poster pre-roll

 

aspect-ratio
Description The aspect ratio of the player. This should correspond to the aspect ratio of the video.
Type Attribute is added to player code based on the aspect ratio with which the video was created.
Options horizontal
vertical
vertical-4-5
Default Aspect ratio with which the video was created
How to Add Attribute sskyplayer.setAttribute("aspect-ratio","vertical");

 

cta-highlight
Description Defines whether the CTA button is highlighted (with a shimmer) when hovered over by the mouse.
Type Attribute is hard-coded in player code with the default option.
Options true
false
Default true (CTA button is highlighted)
 
Click to see the CTA button with a highlight

CTA_with_shimmer.gif

Click to see the CTA button without a highlight

CTA_no_shimmer.gif

Note Add the attribute only if you do not want the CTA button to be highlighted when hovered over by the mouse.
How to Add Attribute sskyplayer.setAttribute("cta-highlight","false");

 

default-error-message
Description The message that is displayed to the viewer when the video cannot be played, due to an error.
Type Attribute is hard-coded in player code with the default option.
Default There has been an error playing the video.
Note Add the attribute only if you want to replace the default message with a different message.
How to Add Attribute sskyplayer.setAttribute("default-error-message","Your video is not currently available, please try again later.");

 

play-button-color
Description The color and outline of the play button.

button_color.png
Type Attribute is included in code snippet:
sskyplayer.setAttribute("play-button-color", "#212022");
Default The primary color, as defined in the brand.
Note If you would like to use a different color, replace the existing hex code with the new hex code.
How to Add Attribute sskyplayer.setAttribute("play-button-color", "#a7b2f2");
Important Information
1. If you are configuring embed code that was not generated with the Embed Code Builder (before February 2024), the following line of code must be added to the code snippet in order for play-button-color to be valid:
sskyplayer.setAttribute("play-button-style-config", "true");
2. If your page is based on older JavaScript code that includes a style section, adding this attribute will not result in any visual change. In order to use this attribute, you'll need to generate new embed code and then replace the older JavaScript code.

Click to see an example of JavaScript code with a style section

Old_code.png

 

play-button-large
Description The size of the play button arrow.
Type Attribute is hard-coded in player code with the default option.
Options true
false
Default false (small arrow)
 
Click to see the small arrow

small_arrow.png

Click to see the large arrow

large_arrow.png

Note Add the attribute only if you want to replace the small arrow with a large arrow.
How to Add Attribute sskyplayer.setAttribute("play-button-large", "true");
Important Information
1. If you are configuring embed code that was not generated with the Embed Code Builder (before February 2024), the following line of code must be added to the code snippet in order for play-button-large to be valid:
sskyplayer.setAttribute("play-button-style-config", "true");
2. If your page is based on older JavaScript code that includes a style section, adding this attribute will not result in any visual change. In order to use this attribute, you'll need to generate new embed code and then replace the older JavaScript code.

Click to see an example of JavaScript code with a style section

Old_code.png

 

play-button-rectangle
Description The shape of the play button.
Type Attribute is hard-coded in player code with the default option.
Options true
false
Default false (round)
 
Click to see the round play button

small_arrow.png

Click to see the rectangular play button

rectangular_button.png

Note Add the attribute only if you want to replace the round play button with a rectangular play button.
How to Add Attribute sskyplayer.setAttribute("play-button-rectangle", "true");
Important Information
1. If you are configuring embed code that was not generated with the Embed Code Builder (before February 2024), the following line of code must be added to the code snippet in order for play-button-rectangle to be valid:
sskyplayer.setAttribute("play-button-style-config", "true");
2. If your page is based on older JavaScript code that includes a style section, adding this attribute will not result in any visual change. In order to use this attribute, you'll need to generate new embed code and then replace the older JavaScript code.

Click to see an example of JavaScript code with a style section

Old_code.png

 

playsinline
Description Mobile only.
Defines the behavior of the player in a mobile device.
Type Attribute is hard-coded in player code with the default option.
Options true
false
Default true (prevents the player from switching to a mobile native player)
Note Add the attribute only if you want to use false.
How to Add Attribute sskyplayer.setAttribute("playsinline","false");

 

poster
Description The URL of the image file that serves as the player background until the viewer clicks the play button.
Type Attribute is included in code snippet:
sskyplayer.setAttribute("poster", "https://smartvideo-hub-assets.sundaysky.com/cc-entities/d916a00b-2c5a-439a-9ac4-4bd6fec10d95/media/445473db-ded4-44c5-9e5e-63f8f397430e/Default_Poster_Image_16_9.png");
Default
Click to see the default image that is displayed

default_poster_image.png

Note If you would like to use a different image, replace the default image URL with the new image URL.

If this attribute is removed from the player code, the player background will be black until the play button is clicked.
How to Add Attribute sskyplayer.setAttribute("poster","https://player.mycompany.com/poster.png");

 

pre-roll
Description The URL of the image file that is displayed after the viewer clicks the play button, until the video is loaded in the player.
Type Attribute is hard-coded in player code with the default option.
Default Based on the aspect ratio of the video, the relevant pre-roll image is added.

Click to see the default horizontal pre-roll image

preroll_horizontal.gif

Click to see the default vertical pre-roll image

preroll_vertical.gif

Note Add the attribute only if you prefer a different pre-roll image. We recommend that the image be animated and in GIF format.
How to Add Attribute sskyplayer.setAttribute("pre-roll", "https://play.mycompany.com/resources/preroll_training_video.gif");

cc-on-by-default control-bar-lock controls-end-state
no-captions no-fullscreen transcript-button
     
cc-on-by-default
Description Defines whether closed captioning is enabled by default.
Type Attribute is hard-coded in player code with the default option.
Options true
false
Default false
Note Add the attribute only if you want to automatically enable closed captioning.
How to Add Attribute sskyplayer.setAttribute("cc-on-by-default","true");

 

control-bar-lock
Description Defines where the control bar is positioned relative to the player.
Type Attribute is hard-coded in player code with the default option.
Options
Option Description
normal When playing inline: the control bar is displayed permanently beneath the player.
When playing in full screen: the control bar is displayed in default mode.
fullscreen When playing in full screen: the control bar is displayed permanently beneath the player.
When playing inline: the control bar is displayed in default mode.
normal fullscreen control bar is displayed permanently beneath the player when playing in both inline and full screen
Default Control bar is not locked and disappears when the mouse pointer moves away from the player window.
Note Add the attribute only if you want to use the normal, fullscreen, or normal fullscreen option.
How to Add Attribute sskyplayer.setAttribute("control-bar-lock","normal fullscreen");

 

controls-end-state
Description Mobile only.
Defines the state of the control bar after the video ends.
Type Attribute is hard-coded in player code with the default option.
Options hide
show
Default hide (control bar is hidden)
Note Add the attribute only if you want to show the control bar after the video ends.
How to Add Attribute sskyplayer.setAttribute("controls-end-state","show");

 

no-captions
Description Defines whether to hide the CC (closed captioning) button.
Type Attribute is hard-coded in player code with the default option.
Options true
false
Default false (CC button is displayed)
Note Add the attribute only if you want to hide the CC (closed captioning) button.
How to Add Attribute sskyplayer.setAttribute("no-captions","true");

 

no-fullscreen
Description Defines whether to hide the full screen button.
Type Attribute is hard-coded in player code with the default option.
Options on
off
Default off (full screen button is displayed)
Note Add the attribute (with 2 single quotes) only if you want to hide the full screen button.
How to Add Attribute sskyplayer.setAttribute("no-fullscreen", "");

 

transcript-button
Description Defines whether the transcript button is included in the control bar. When this button is clicked, a detailed video transcript is displayed in a new tab.
Type Attribute is included in code snippet:
sskyplayer.setAttribute('transcript-button','show');
Options hide
show
Default show
Note Replace show with hide if you want to hide the transcript button.
How to Add Attribute sskyplayer.setAttribute("transcript-button","hide");
Was this article helpful?
0 out of 0 found this helpful

Still Have Questions?

SundaySky Support is here for you

contact support