AMP - HTML5 Visual customization

Document created by Herberth Alvarado Champion on Jul 11, 2016Last modified by Herberth Alvarado Champion on Jan 26, 2017
Version 10Show 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 the HTML5 AMP Player can be customized through changes at CSS level.

 

You can create a custom_styles.css and put it next to the "styles.css" and include it in the page.

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

Now you are ready to start customizations.

 

In the lines below I'll show you how to change somethings, as a little demonstration.

 

Height size of the player in the

.sample-player{

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

}

 

Play area background

#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 .akamai-control-bar{

  background: rgba(0,0,255,255.45); /* background color bar */

  border: 1;                                           /* line between the bar and the play area */

  height: 45px;                                     /* height of the progress bar */

  display: block;                                  /* Set the control bar to always show */

}

 

Volume control

#akamai-media-player .akamai-volume.akamai-panel{

  position: absolute;

  width: 48px;

  height: 158px;

  bottom: 45px;

  right: 38px;

  background: rgba(255,255,255,0.5);

}

 

Play icon image at the center of the play area

#akamai-media-player .akamai-play.akamai-overlay{

  background-image:url('../images/button_play.png');

  background-position:0 0;

  background-repeat: no-repeat;

  width:129px;

  height: 129px;

}

 

Progress bar colors

/* Progress bar color */

#akamai-media-player .akamai-progress .akamai-value {

    background: rgba(119,13,148,1);

    background: -moz-linear-gradient(top, rgba(119,13,148,1) 0%, rgba(57,13,140,1) 50%, rgba(119,13,148,1) 100%);

    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(119,13,148,1)), color-stop(50%, rgba(57,13,140,1)), color-stop(100%, rgba(119,13,148,1)));

    background: -webkit-linear-gradient(top, rgba(119,13,148,1) 0%, rgba(57,13,140,1) 50%, rgba(119,13,148,1) 100%);

    background: -o-linear-gradient(top, rgba(119,13,148,1) 0%, rgba(57,13,140,1) 50%, rgba(119,13,148,1) 100%);

    background: -ms-linear-gradient(top, rgba(119,13,148,1) 0%, rgba(57,13,140,1) 50%, rgba(119,13,148,1) 100%);

    background: linear-gradient(to bottom, rgba(119,13,148,1) 0%, rgba(57,13,140,1) 50%, rgba(119,13,148,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#770d94', endColorstr='#770d94', GradientType=0 );

}

 

/* first bit of the progress*/

#akamai-media-player .akamai-progress .akamai-start-cap {

    background: rgba(119,13,148,1);

    background: -moz-linear-gradient(top, rgba(119,13,148,1) 0%, rgba(57,13,140,1) 50%, rgba(119,13,148,1) 100%);

    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(119,13,148,1)), color-stop(50%, rgba(57,13,140,1)), color-stop(100%, rgba(119,13,148,1)));

    background: -webkit-linear-gradient(top, rgba(119,13,148,1) 0%, rgba(57,13,140,1) 50%, rgba(119,13,148,1) 100%);

    background: -o-linear-gradient(top, rgba(119,13,148,1) 0%, rgba(57,13,140,1) 50%, rgba(119,13,148,1) 100%);

    background: -ms-linear-gradient(top, rgba(119,13,148,1) 0%, rgba(57,13,140,1) 50%, rgba(119,13,148,1) 100%);

    background: linear-gradient(to bottom, rgba(119,13,148,1) 0%, rgba(57,13,140,1) 50%, rgba(119,13,148,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#770d94', endColorstr='#770d94', GradientType=0 );

}

 

/* Bar color */

#akamai-media-player .akamai-progress .akamai-track {

    background: rgba(128,92,138,1);

    background: -moz-linear-gradient(top, rgba(128,92,138,1) 0%, rgba(0,150,219,1) 50%, rgba(34,14,70,1) 100%);

    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(128,92,138,1)), color-stop(50%, rgba(0,150,219,1)), color-stop(100%, rgba(34,14,70,1)));

    background: -webkit-linear-gradient(top, rgba(128,92,138,1) 0%, rgba(0,150,219,1) 50%, rgba(34,14,70,1) 100%);

    background: -o-linear-gradient(top, rgba(128,92,138,1) 0%, rgba(0,150,219,1) 50%, rgba(34,14,70,1) 100%);

    background: -ms-linear-gradient(top, rgba(128,92,138,1) 0%, rgba(0,150,219,1) 50%, rgba(34,14,70,1) 100%);

    background: linear-gradient(to bottom, rgba(128, 92, 138,1) 0%, rgba(0,150,219,1) 50%, rgba(34,14,70, 1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#770d94', endColorstr='#770d94', GradientType=0 );

}

 

/* Last bit of the progress */

#akamai-media-player .akamai-progress .akamai-end-cap {

    background: rgba(128,92,138,1);

    background: -moz-linear-gradient(top, rgba(128,92,138,1) 0%, rgba(0,150,219,1) 50%, rgba(34,14,70,1) 100%);

    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(128,92,138,1)), color-stop(50%, rgba(0,150,219,1)), color-stop(100%, rgba(34,14,70,1)));

    background: -webkit-linear-gradient(top, rgba(128,92,138,1) 0%, rgba(0,150,219,1) 50%, rgba(34,14,70,1) 100%);

    background: -o-linear-gradient(top, rgba(128,92,138,1) 0%, rgba(0,150,219,1) 50%, rgba(34,14,70,1) 100%);

    background: -ms-linear-gradient(top, rgba(128,92,138,1) 0%, rgba(0,150,219,1) 50%, rgba(34,14,70,1) 100%);

    background: linear-gradient(to bottom, rgba(128, 92, 138,1) 0%, rgba(0,150,219,1) 50%, rgba(34,14,70, 1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#770d94', endColorstr='#770d94', GradientType=0 );

}

 

Icons (PlayPause, Volumen, Fullscreen buttons)

Colors

#akamai-media-player  .akamai-play-pause.akamai-button .akamai-icon {

  -webkit-filter: opacity(0.25) sepia(1);

  filter: opacity(0.25) sepia(1);

}

 

#akamai-media-player  .akamai-volume.akamai-button .akamai-icon {

  -webkit-filter: opacity(0.25) sepia(1);

  filter: opacity(0.25) sepia(1);

}

#akamai-media-player .akamai-full-screen.akamai-button .akamai-icon {

  -webkit-filter: opacity(0.25) sepia(1);

  filter: opacity(0.25) sepia(1);

}

 

Size (Fullscreen button)

.akamai-full-screen.akamai-button .akamai-icon {

    width: 25px;

    height: 21px;

    background-position: -130px 0px;

    transform: scale(0.50);

    transform-origin:left top;

}

 

Sample:

 

Off the shelf appearance:

AMP - Samples - VOD

AMP_-_Samples_-_VOD_Anrre0.png

 

After some random changes:

AMP - Samples - VOD

AMP_-_Samples_-_VOD_Anrre1.png

A much better look:

AMP - Samples - VOD

AMP_-_Samples_-_VOD_Anrre2.png

 

 

 

This document is part of Adaptive Media Player Web User Guide

1 person found this helpful

Attachments

    Outcomes