SundaySky JavaScript Embed Code: Player Attributes

Overview

This article details all player attributes supported by the SundaySky player when using JavaScript embed code.

Note that the following attributes can also be configured using the Embed Code Builder:

• aspect-ratio
• cc-on-by-default
• control-bar-lock
• play-button-color
  
• play-button-large
• play-button-rectangle
• poster
• transcript-button

---

Player Customization Attributes

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

aspect-ratio
Description	The aspect ratio of the player, corresponding to the aspect ratio of the video.
Code Visibility	Visible in code snippet
Code Example	sskyplayer.setAttribute("aspect-ratio","vertical");
Supported Attribute Values	horizontal vertical vertical-4-5
Default Attribute Value	The aspect ratio with which the video was created.

 

cta-highlight
Description	Defines whether the CTA button is highlighted (with a shimmer) when hovered over by the mouse.
Code Visibility	Not visible in code snippet
Supported Attribute Values	true false
Default Attribute Value	true (CTA button is highlighted)
	Click to see the CTA button with a highlight Click to see the CTA button without a highlight
Note	Add the attribute only if you do not want the CTA button to be highlighted when hovered over by the mouse.
Code Example	sskyplayer.setAttribute("cta-highlight","false");

 

default-error-message
Description	This is the message displayed to the viewer when the video cannot be played due to an error.
Code Visibility	Not visible in code snippet
Default Attribute Value	There has been an error playing the video.
Note	Add the attribute only if you want to override the default message.
Code Example	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.
Code Visibility	Visible in code snippet
Default Attribute Value	The primary color, as defined in the brand.
Note	To apply a different color, override the existing hex code.
Code Example	sskyplayer.setAttribute("play-button-color", "#a7b2f2");
Legacy Code Notes	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

 

play-button-large
Description	The size of the play button.
Code Visibility	Not visible in code snippet
Supported Attribute Values	true false
Default Attribute Value	false (small play button)
	Click to see the small play button Click to see the large play button
Note	Add the attribute only if you want the player to display a large play button.
Code Example	sskyplayer.setAttribute("play-button-large", "true");
Legacy Code Notes	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

 

play-button-rectangle
Description	The shape of the play button.
Code Visibility	Not visible in code snippet
Supported Attribute Values	true false
Default Attribute Value	false (round)
	Click to see the round play button Click to see the rectangular play button
Note	Add the attribute only if you want the player to display a rectangular play button.
Code Example	sskyplayer.setAttribute("play-button-rectangle", "true");
Legacy Code Notes	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

 

playsinline
Description	Mobile only. Defines the behavior of the player in a mobile device.
Code Visibility	Not visible in code snippet
Supported Attribute Values	true false
Default Attribute Value	true (prevents the player from switching to a native mobile player)
Note	Add the attribute only if you want the player to switch to the device's native mobile player.
Code Example	sskyplayer.setAttribute("playsinline","false");

 

poster
Description	The URL of the image that serves as the player background until the viewer clicks the play button.
Code Visibility	Visible in code snippet
Default Attribute Value	Click to see the default image that is displayed
Notes	To use a different image, override the default image URL. If this line of code is removed from the snippet, the player background will be black until the play button is clicked.
Code Example	sskyplayer.setAttribute("poster","https://player.mycompany.com/brand.png");

 

pre-roll
Description	The URL of the image displayed after the viewer clicks the play button and while the video is loading in the player.
Code Visibility	Not visible in code snippet
Default Attribute Value	The relevant pre-roll image is added based on the video's aspect ratio.
	Click to see the default horizontal pre-roll image Click to see the default vertical pre-roll image
Note	Add the attribute only if you want to use a different pre-roll image. Make sure that the image is animated and in GIF format.
Code Example	sskyplayer.setAttribute("pre-roll", "https://player.mycompany.com/resources/preroll_training.gif");

 

width
Description	Specifies the width of the player, using pixels, a percentage, or an absolute value, as defined in the embed code. The player height is automatically calculated based on this width and the video's aspect ratio. See Notes below for more details. If the player is embedded in a section narrower than the specified width, it will scale down proportionately to fit the available space.
Code Visibility	Visible in code snippet
Default Attribute Value	If the aspect ratio of the video is 16:9, the default width is 720 px. If the aspect ratio of the video is 9:16, the default width is 360 px. If the aspect ratio of the video is 4:5, the default width is 512 px.
Notes	The default width can be overridden using one of the following formats: Absolute number (e.g., 810) String with pixels (e.g., 600px) Percentage (e.g., 50%) When you set the width as a percentage, the SundaySky player resizes relative to the element in which it is embedded. For example, if the embed code is placed into a section that is 700px wide and the width is set to 50%, the player will automatically scale to 350px. If the website is responsive, using a percentage value ensures the player resizes along with the page. auto: Use the value auto instead of a fixed pixel size to make the player width responsive. This allows the player to resize and fit the full width of the page based on the available space. It is recommended to avoid using the auto value if an NPS survey is included in the video.
Code Examples	sskyplayer.setAttribute("width","810"); sskyplayer.setAttribute("width","600px"); sskyplayer.setAttribute("width","50%"); sskyplayer.setAttribute("width","auto");

---

Accessibility-Related Attributes

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.
Code Visibility	Not visible in code snippet
Supported Attribute Values	true false
Default Attribute Value	false (closed captioning is not enabled by default)
Note	Add the attribute only if you want closed captioning to be enabled automatically.
Code Example	sskyplayer.setAttribute("cc-on-by-default","true");

 

control-bar-lock
Description	Defines where the control bar is positioned relative to the player.
Code Visibility	Not visible in code snippet
Supported Attribute Values	Value 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 inline: the control bar is displayed in default mode. When playing in full screen: the control bar is displayed permanently beneath the player. normal fullscreen Control bar is displayed permanently beneath the player when playing in both inline and full screen.
Default Attribute Value	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 one of the supported values: normal, fullscreen, or normal fullscreen.
Code Example	sskyplayer.setAttribute("control-bar-lock","normal fullscreen");

 

controls-end-state
Description	Mobile only. Defines the state of the control bar after the video ends.
Code Visibility	Not visible in code snippet
Supported Attribute Values	hide show
Default Attribute Value	hide (control bar is hidden)
Note	Add the attribute only if you want to show the control bar after the video ends.
Code Example	sskyplayer.setAttribute("controls-end-state","show");

 

no-captions
Description	Defines whether to hide the CC (closed captioning) button.
Code Visibility	Not visible in code snippet
Supported Attribute Values	true false
Default Attribute Value	false (CC button is displayed)
Note	Add the attribute only if you want to hide the CC (closed captioning) button.
Code Example	sskyplayer.setAttribute("no-captions","true");

 

no-fullscreen
Description	Defines whether to hide the full screen button.
Code Visibility	Not visible in code snippet
Supported Attribute Values	on off
Default Attribute Value	off (full screen button is displayed)
Note	Add the attribute (with 2 single quotes) only if you want to hide the full screen button.
Code Example	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.
Code Visibility	Visible in code snippet
Supported Attribute Values	hide show
Default Attribute Value	show (transcript button is displayed)
Note	To hide the transcript button, override the default value with hide.
Code Example	sskyplayer.setAttribute("transcript-button","hide");