Skip to main content

Customize Plugins Using CSS

Updated
3Play Media plugins can be further customized using CSS. Follow the examples below to add CSS to your plugins.

Prerequisites

  • This feature is not available to Express customers

 

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...

Add Style Color to interactive transcript text

 

Word Highlighting

Progressive Tracking is NOT enabled
To 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...Add CSS to interactive transcript
 
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...Add CSS to interactive transcript with progressive tracking

 

 

Related articles