Specs
CSS custom properties
Customize CueSync by modifying the CSS custom properties listed below.
Transcript container
Property
Default Value
Description
--cs-container-bg
#fff
Transcript container background color
--cs-container-color
#000
Transcript container text color
--cs-container-padding-x
5px
Transcript container padding left and right
--cs-container-padding-y
5px
Transcript container padding top and bottom
--cs-container-border-width
1px
Transcript container border width
--cs-container-border-style
solid
Transcript container border style
--cs-container-border-color
#e9e9e9
Transcript container border color
--cs-container-border-radius
4px
Transcript container border radius
Transcript
Property
Default Value
Description
--cs-padding-x
5px
Transcript padding left and right
--cs-padding-y
5px
Transcript padding top and bottom
--cs-border-radius
4px
Transcript border radius
--cs-hover-bg
#e3e4e5
Transcript hover background color
--cs-hover-color
#000
Transcript hover color
--cs-active-bg
#9ec5fe
Transcript active background color
--cs-active-color
#000
Transcript active color
--cs-highlight-bg
transparent
Transcript highlight background color
--cs-highlight-color
#084298
Transcript highlight color
Timestamp
Property
Default Value
Description
--cs-time-bg
#084298
Timestamp background color
--cs-time-color
#fff
Timestamp color
--cs-time-border-radius
4px
Timestamp border radius
--cs-time-width
auto
Timestamp width(Automatically adjusted to match the width of the longest timestamp.)
Javascript options
Option
Description
transcriptPath
Sets the transcript file path
media
Sepcifies the media element for transcript highlighting and interactive control
displayTime
Indicates whether the timestamp should be displayed or not
Javascript functions
Function
Description
getInstance
Static method that enables you to obtain the CueSync instance associated with a DOM element.
getOrCreateInstance
Static method that enables you to obtain the CueSync instance associated with a DOM element or create a new one if it hasn’t been initialized.
redrawTime
Ensures consistent timestamp element width in CueSync by recalculating dimensions when transcripts become visible.
refresh
Reconfigures a CueSync instance, useful in case it was not properly initialized during the first attempt.
dispose
Destroys an element’s instance and removes stored data associated with the DOM element.
HTML attributes
HTML attribute
Javascript equivalent option
Description
data-cs-transcript-path
transcriptPath
Sets the transcript file path
data-cs-display-time
displayTime
Indicates whether the timestamp should be displayed or not