AMP - HTML5 React skin customization

Document created by Andrea Zuniga Employee on Mar 5, 2018Last modified by Andrea Zuniga Employee on Mar 7, 2018
Version 7Show Document
  • View in full screen mode

Maintainer: Andrea Zuniga

This document is part of Adaptive Media Player Web User Guide


The look and feel of HTML5 AMP Player can be customized through changes at CSS level.


React skin as any HTML5 based player can be modified over CSS, here's a list of basic modifications you can do to the player:


First, create your custom CSS file, and include it to your web page:


<link type="text/css" rel="stylesheet" href="../resources/styles/custom_styles.css" />


Inside of this file, we are going to add the changes to the player. 


Height and size of the player:

AMP player is 100% responsive, this means it will get the size of their parent element. 



  height:300spx;    /* Size of the player */



Background area

If you want to change the background of the player try this out:



#akamai-media-player.akamai-player{       /* play area background color */  background: rgba(0,150,219,1);                                                                                                                                                  /* Old browsers */  background: -moz-linear-gradient(top, rgba(0,150,219,1) 0%, rgba(0,150,219,1) 17%, rgba(62,9,148,1) 100%);             /* FF3.6+ */  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,150,219,1)), color-stop(17%, rgba(0,150,219,1)), color-stop(100%, rgba(62,9,148,1)));                                                                                                                                                                          /* Chrome,Safari4+ */  background: -webkit-linear-gradient(top, rgba(0,150,219,1) 0%, rgba(0,150,219,1) 17%, rgba(62,9,148,1) 100%);       /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top, rgba(0,150,219,1) 0%, rgba(0,150,219,1) 17%, rgba(62,9,148,1) 100%);                 /* Opera 11.10+ */  background: -ms-linear-gradient(top, rgba(0,150,219,1) 0%, rgba(0,150,219,1) 17%, rgba(62,9,148,1) 100%);              /* IE10+ */  background: linear-gradient(to bottom, rgba(0,150,219,1) 0%, rgba(0,150,219,1) 17%, rgba(62,9,148,1) 100%);           /* W3C */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0096db', endColorstr='#3e0994', GradientType=0 );  /* IE6-9 */}



Control bar background

#akamai-media-player .amp-controls{

   background-color: #4286f4;



Progress bar color

#akamai-media-player .amp-slider .amp-value{




Volume control background

#akamai-media-player .amp-volume .amp-value{






Change color of an icon control bar

Icons we are working with are actually a character font, that means you can change their color with basic CSS:

#akamai-media-player .amp-playpause.amp-icon.amp-control{



Remove a specific bottom from the control bar

Let's say you want to remove one of the items from the control bar, for example, the shared bottom you can the follow:

#akamai-media-player .amp-share.amp-icon.amp-control{
   display: none;


Remove a specific item from a submenu 

For example, you want to work with the share functionality but without email and embedded (third and fourth child of the element), you must:

.amp-share.amp-panel :nth-child(3), .amp-share.amp-panel :nth-child(4){
 display: none;




This document is part of Adaptive Media Player Web User Guide

1 person found this helpful