You can customize the look and feel of the interactive plugin with CSS.
Search
The interactive plugin comes with a search field. Modify the CSS of the p3sdk-interactive-transcript-searchbox class to change how the search box looks and the CSS of the p3sdk-interactive-transcript-search-hit class to change how the results are displayed.
Word Tracking Options
There are three HTML classes used for word tracking with the interactive transcript. p3sdk-current-word highlights the current word as it is being spoken. p3sdk-tracked-words highlights the words in the current paragraph that have been spoken. p3sdk-tracked-paragraph highlights the previous paragraphs that have already been spoken. To use any of these features, simply apply a CSS style, such as a background color or a font color, to the class you wish to implement.
Please note that these styles can be used alone or together, but p3sdk-tracked-words overrides the behavior of p3sdk-tracked-paragraph.
Control Bar
Modify the control bar by changing the style of the class, p3sdk-interactive-transcript-control-bar. You can change the icons for keywords and download by changing the styles of p3sdk-fa-magic and p3sdk-fa-download.
Interactive Transcript
Change the look and feel of the interactive transcript by changing the class of p3sdk-interactive-transcript-content
0 Comments