Customizing Player V4 Controls with Graphics

You can replace the default playback controls (buttons) with custom graphics by modifying the player CSS.
  • Modify _type.scss to include a graphic rather than use a font file. For example, you would modify
    .icon-play:before
    { content: "h"; }                        
    to look like the following:
    .icon-play:before
    { content: url("myPlayIcon.png"); }                      
  • To adjust the size of the graphic, style psuedo elements by inserting whitespace as content and setting a background image and style instead. For example:
    .icon-play:before
    { content: " “; background: url("./assets/images/icon-play.png"); background-size: 30px; background-size: contain; width: 30px; height: 30px; display: inline-block; }

    This is method works for flattened images, or svg. The important piece is content:" ".

Was this article helpful?