Player skinning

Introduction

This document explains how to customize the look and feel of the player. For the cloud hosted (async) player, you can predefine options like brand color, logo, controlbar, icon and button appearance in the Flowplayer platform UI, see the section below. Both the cloud player and the standalone Javascript player can be further enhanced and modifed with CSS code.

Platform player builder

The platform player configurator allows you to create indidual cloud-hosted settings which can be selected per video or livestream when creating your paltform embed code. For a full tutorial, please see this player configuration guide. The player configurator handles a lot more than just the appearance, it's also responsible for the playback and preload behavior, ad scheduling, the host allowed to use the player configuration and which plugins to load.

In regards to skinning, you can modify the following elements in the configurator interface:

• play icon: select one of three prdefined styles for the center play button
• controlbar: thick or slim timeline, show / do not show a drag handle on the scrubber
• brand color: set the timeline and volume bar to your company brand color
• custom logo: show your company logo on the top left player (can be changed to right with CSS by adding an image url
• button visibility: whether volume, mute and fullscreen buttons should be visible
• metadata visibility: should the palyer show video title and/or description on the start screen
• player interface language (in the standalone player, this is handled by loading the respective language file), for exmaple in the sharing menu or the ads controls

Programmatic skinning

For maximum flexibility, you can modify the mentioned elements with CSS styles.

Brand color

The most simple way to make the player match your brand is to configure the player with your own brand color. This can be accomplished with one simple CSS rule:

.fp-color {
    background-color: #02539F;
}

Custom logo

You can show your custom logo on the top/left corner of the player with the logo configuration option. For example

flowplayer('.player', {
  src: 'video/acme-promo.{mp4,webm}',
  logo: 'assets/acme-logo.png'
})

You can use the logo-on-right and logo-on-bottom (since v3.4.5) CSS configuration class to place it on the right asnd/or bottom instead. See below for details on the skinning options.

Skinning options

Flowplayer looks can be altered with extra CSS modifier classes added to the root element (container) of the player. You can check out the effects by adding the classes to a container in our try sandbox

Modifier CSS classes

logo-on-right — displays the configured logo on top/right corner instead of the default top/left

logo-on-bottom — displays the configured logo on top/right corner instead of the default top/left v3.4.5+

use-drag-handle — displays a round "drag handle" on the right edge of the progress bar.

use-muted-autoplay — uses a design that is optimized for muted autoplay similar to what you can see on Facebook

use-play-1 — uses the standard play (solid triangle) and (solid) pause icon in the center of the player

use-play-2 — uses an alternate play (outlined triangle) and (outlined) pause icon in the center of the player

use-play-3 — uses an alternate play (small solid triangle in circle) icon in the center of the player

use-thin-controlbar — uses a thinner controlbar that gets taller when the mouse is hovering the player

CSS modifer sample code

<div class="use-drag-handle use-thin-controlbar use-play-2 logo-on-right flowplayer" 
 data-player-id="56058953-2cbd-4858-a915-1253bf7ef7b2">
 <script src="//cdn.flowplayer.com/players/8dfd6c14-ba3a-445e-8ef5-191d9358ed0a/native/flowplayer.async.js">
    { "src": "00dc2cd3-3813-4869-8ab8-00ece266b958",
      "logo": "https://flowplayer.com/images/acme-logo.png" }
  </script>
</div>

CSS variables

Since version 3.0, the player skin uses CSS variables to define overridable properties.

You can control for instance the brand color with the --fp-brand-color variable.

Another example is the player's icons. All the icons are stored in global variables and used as background images. You can use your own simply by overriding the aforementioned variables.

<style>
:root{
  --fp-play-icon: url("your svg as Data URL");
}
</style>

Here's a list of all the icons variables

• fp-play-icon — the standard play (solid triangle)
• fp-play-circle-icon — an alternate play (small solid triangle in circle)
• fp-play-stroke-icon — an alternate play (outlined triangle)
• fp-pause-icon — solid pause icon
• fp-pause-stroke-icon — outlined pause icon
  • see modifier css classes
• fp-volume-icon — volume icon
• fp-fs-icon — fullscreen icon
• fp-fs-exit-icon — exit fullscreen icon
• fp-unmute-icon — unmute icon
• fp-mute-icon — mute icon
• fp-close-icon — X close icon

Player states

The player can be in various states during playback, and for each state there is a specific CSS class name. For example:

/* make player semi-transparent before it's fully loaded */
.is-loading {
  opacity: .3
}

State classes let's you change the player looks dynamically during the lifetime of a player. Here's a full list of the state classes

is-ad-playing — when an add is being played

is-ended — when the playback is ended

is-fullscreen — when player is on fullscreen mode

is-hovered — when the mouse is hovering the player

is-loaded — after player is loaded and "loadstart" event has been fired

is-loading-3, is-loading-2, is-loading-1 — a sequence of classes that gets assigned while the video is being loaded initially

is-muted — when player is muted

is-paused — when player is paused

is-seeking — when player is seeking

is-small — when player is less than 600px wide

is-starting — when "autoplay" is set to false and playback is not yet started

is-tiny — whenf player is less than 400px wide

Adding custom css

You can also create custom css to override or enhance the existing skin. For example, to add a background to the controlbar (advisable if your video does not contrast with the controls), create a custom <style> and add the created CSS class to the root element:

<style>
.use-controlbar-background .fp-controls { background-color: rgba(0,0,0,.6) }
</style>

<div class="use-controlbar-background flowplayer"
 data-player-id="56058953-2cbd-4858-a915-1253bf7ef7b2">
 <script src="//cdn.flowplayer.com/players/8dfd6c14-ba3a-445e-8ef5-191d9358ed0a/native/flowplayer.async.js">
    { "src": "00dc2cd3-3813-4869-8ab8-00ece266b958",
      "logo": "https://flowplayer.com/images/acme-logo.png" }
 </script>
</div>

Create your own skin

[TBD]