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:
- 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 |
play-button-color | |||||
Description | The color and outline of the play button. |
||||
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 |
|
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
Click to see the large arrow
|
|||||
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 |
|
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
Click to see the rectangular play button
|
|||||
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 |
|
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
Click to see the default vertical pre-roll image
|
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"); |
Accessibility-Related Attributes
cc-on-by-default | control-bar-lock | controls-end-state |
no-captions | no-fullscreen | transcript-button |
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"); |