Video player styling

WimTV Framework implements Flowplayer, the best video player in the market for websites.

The Flowplayer skin is designed with CSS3. It offers extreme flexibility when it comes to customization. You can find the CSS3 reference to customize the skin of the player at this link: Skinning the player with CSS

Example

In this example, the player has been customized with orange material colors

We have changed the following css classes, overriding the flowplayer classes

CSS Selector Player element Declarations
.controlbutton the central "play" icon when the player is ready {fill: #E65100 !important;}
.rect the central "pause" icon when the player is paused {fill: #E65100 !important;}
.flowplayer .fp-color the color in the player's command bar {fill: #E65100 !important;}
.flowplayer.fp-edgy .fp-fullscreen:before the color of the full screen icon {color: #FB8C00;}
.flowplayer.fp-edgy .fp-share:before the color of the share icon {color: #FB8C00;}
.flowplayer.fp-edgy .fp-playbtn:before the color of the play icon in the command bar {color: #FB8C00;}
.is-ready effects added to the player when it's ready (in this case, border and shadow) {border: 2px solid rgba(230, 81, 0, 1);
box-shadow: rgba(230, 81, 0, 0.2) 0px 12px 36px 0px, rgba(230, 81, 0, 0.137255) 0px 12px 12px 0px, rgba(230, 81, 0, 0.117647) 0px 24px 12px -12px;}

Flowplayer license

You can hide the overlay Flowplayer logo by purchasing a player license for your domain on the Flowplayer site. After purchasing the license you can insert it in the getWim.js file by searching the field flowplayerLicense, like in this example:

flowplayerLicense:"$123456789123456"