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
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"