Redirect Notice

Customizing the React UI can be achieved via a combination of CSS and JS overrides. For simple colorization of the player, the theme api can be used:

var config = {
  var config = {
    plugins: {
      react: {
        resources: [
          {src: "#{paths.plugins}react/libs/react.min.js", debug: "#{paths.plugins}react/libs/react.js", type: "text/javascript"},
          {src: "#{paths.plugins}react/React.min.css", debug: "#{paths.plugins}react/React.css", type: "text/css"},
          {src: "#{paths.plugins}react/React.js", debug: "#{paths.plugins}react/React.js", type: "text/javascript"}
        ],
        theme: {
          text: "#DDDDDD",
          foreground: "rgba(217, 107, 18, 1)",
          background: "rgba(21, 103, 158, 0.8)"
        }
      }
    }
  }
};
akamai.amp.AMP.create("amp", config);

Themes can also be set at runtime:

amp.react.theme = {
  text: "#DDDDDD",
  foreground: "rgba(217, 107, 18, 1)",
  background: "rgba(21, 103, 158, 0.8)"
};

For modifications beyond simple colorization, use CSS to override the UI styles:

<style>
  .amp-rewind {
    display: none !important;
  }

  .amp-icon:hover {
    color: #CCCCCC;
  }
</style>

or via the JS using the embedded style tag:

<script>
  amp.react.style.innerHTML += ".amp-pause-overlay { display: none; }"
</script>

Here is a non-exhaustive list of the class names used in the player UI:

Base Classes

• .amp-ui: The top level class. Use to override player wide text styles.
• .amp-bg: Background color of the control bar, floating buttons and menus.
• .amp-hover:hover: Hover color of floating buttons and menu items.
• .amp-icon: The icons used in the control bar and menus.
• .amp-slider: The base slider class.
  • .amp-slider .amp-handle: The draggable slider handle button.
  • .amp-slider .amp-track: The background of the slider track.
  • .amp-slider .amp-range: The available range of the slider. (i.e. loaded video content)
  • .amp-slider .amp-value: The fill of the slider.
• .amp-menu: The menu base class used for the settings and context menus.
  • .amp-menu-title: The menu title. Serves as a back button for nested menus.
  • .amp-menu-item: The class for menu items.
• .amp-hint-container: The hints base class for setting the element position (desktop only)
  • .amp-hint: The class to customize UI tooltips (i.e background and font)

Controls

• .amp-controls: The control bar.
• .amp-playpause: The play/pause button.
• .amp-pause-overlay: The large pause button.
• .amp-jump-back: Jump back button.
• .amp-jump-forward: Jump forward button.
• .amp-icon: The icons used in the control bar and menus.
• .amp-time-display: The time display container.
  • .amp-current-time: The current time display.
  • .amp-time-separator: The time separator.
  • .amp-duration: The duration display.
  • amp-live-label: The live indicator.
• .amp-mute: The mute button connected to the volume slider.
• .amp-volume: The volume slider.
• .amp-share: The share button.
• .amp-cc: The closed caption toggle button.
• .amp-settings: The settings menu toggle button.
• .amp-pip: The picture in picture button. (Safari only)
• .amp-airplay: The airplay button. (Safari only)
• .amp-chromecast: The chromecast button. (Chrome only)
• .amp-fullscreen: The fullscreen button.

More advanced customizations can be made using JS overrides:

akamai.amp.AMP.create("amp", config).then(function (player) {
  var amp = player;
  var component = React.createElement("button", {
    className: "amp-icon amp-fullscreen",
    id: "component",
    key: "fs",
    onClick: function () {
      console.log("Custom Control");
    }
  });
  amp.react.controls.addComponent(component);
  // amp.react.controls.removeComponent(component);

  var element = document.createElement("div");
  amp.react.container.appendChild(element);
  // amp.react.container.removeChild(element);
});