3Play Media plugins can be further customized using CSS. Follow the examples below to add CSS to your plugins.
For more advanced customization options, visit the Plugins Gallery.
For more advanced customization options, visit the Plugins Gallery.
Text Style
To change the style of the text in your interactive transcript, add the following CSS to your stylesheet or to the <head> section of your HTML.
.p3-transcript-main p {
color: orange !important;
font-style: italic !important;
font-size: 20px !important;
}
The snippet of code above will produce text that looks like this image...
Word Highlighting
Progressive Tracking is NOT enabledTo change the way that the current word is highlighted as the video plays, add the following CSS to your stylesheet or to the <head> section of your HTML.
.p3-transcript-container .current_word {color: blue !important;background: orange !important;}
Using this CSS highlights the word being spoken in an interactive transcript and will look similar to this image...
Progressive Tracking is enabled
To change the way words are highlighted that were spoken in the media file add the following CSS to your stylesheet or to the <head> section of your HTML.
.p3-transcript-container .tracked_word, .p3-transcript-container .tracked_paragraph {color: orange !important;background: none !important;}
Using this CSS the text will track progressively similar to this image...
0 Comments