- Skinning with CSS
- Loading the skin
- Brand colors
- Modifier classes
- Right to left support
- HTML layout
- Commercial features
- Migration from Version 6
Skinning with CSS
The Flowplayer skin is designed with CSS3. It offers extreme flexibility when it comes to customization.
There are various approaches to tailor the design to your wishes:
- change the brand colors via CSS
- add CSS modifier classes to the container element to pick a theme and change icons and timeline controls
- override some directives with your own CSS
- clone our default skins and edit them - the skin resources are managed in GitHub
- write a skin from scratch
Typically you use a combination of 1, 2, and 3.
Loading the skin
The skin stylesheet is loaded in the HEAD section of the page:
To use the skin you can:
- download it and put it on your server or
- load it directly from our CDN URL as shown above
The Flowplayer skin also contain fonts instead of graphics for fast loading.
The font files must be served on a loose cross-origin policy
with an appropriate
Access-Control-Allow-Origin header if they are loaded from
a different domain, for instance when the player is shared.
Simple apache sample config:
For more details look up cross-orgin resource sharing.
The most decisive aspect in making the player "yours" is to set the brand color.
Change the color of the progress bar and active menu items with a CSS directive
By default the control bar background is transparent.
The player canvas is normally visible only when the video is letterboxed or
pillarboxed in fullscreen more, or during the transition from one playlist item
to another. Its color is dark grey:
Make the canvas black:
See also the
bgcolor option for the Flash
For HTML5 video even the canvas color can be used for effect and changed dynamically. Play this in fullscreen.
Here is a complete list of the available modifier classes:
Timeline and icon modifiers can be combined.
Three themes are available for the overall look of the player.
This is how the skin looks like without and modifications:
A highly stripped mode when not in fullscreen mode with just a short and slim timeline. In fullscreen all the configured buttons are visible and the timeline is usable. Outlined icons only. Use on special occasions when you don't want the player skin to be in the way at all.
Set up by adding the
fp-minimal class to the container element.
Set up by adding the
fp-playful class to the container element.
Normally player controls are shown when hovering over the player or in paused
state. By adding the
no-toggle class to the container element you
can make them stick and always visible.
Change the looks of the timeline with CSS classes.
A slim timeline, expanding on mouseover, can be set up by adding the
class to the container element.
Positions the timeline above the controlbar buttons and makes it span the whole
width, similar to the YouTube player. Can be set up by adding the
class to the container element.
To enhance the prominence of the brand color with a tall timeline add the
fp-fat class to the container element.
See also the playful theme.
The buffer indicator can be removed by adding the
no-buffer class to the
Customize the look of, and add/remove interactive icons with CSS classes.
Angular icons are set up by adding the
fp-edgy class to the container element.
Outlined icons are set up by adding the
fp-outlined class to the container element.
The volume control can be removed by adding the
no-volume class to the
container element. This is done automatically on mobile devices where the volume
and can only be changed via device controls.
Right to left support
Flowplayer inherently supports right-to-left layouts. On pages which have set RTL direction globally:
Flowplayer will automatically do the right thing and become a right to left video player.
Of course you can also set up Flowplayer in the opposite direction of the body. The following CSS directives will result in left to right players on a right to left page:
A demo of a right to left player on a left to right page can be found here.
The player can be in various states during playback, and for each state there is a CSS class name which is added or removed according to the current state. For example:
As you can specify CSS directives for these states you gain a powerful tool to skin the player and the descendant elements dynamically during the lifetime of a player. Most of our demos are just CSS "programming". This is where Flowplayer excels as a truly HTML-based video player: concept and design evolve smoothly from the core structure of the underlying markup language.
These classes are in use no matter whether you are using a default or custom skin. By convention all state class names start with an "is-" prefix.
is-closeablea close/unload button replaces the fullscreen toggler
is-disabledafter the disabled() method was called
is-dvrwhen the player is set up to play a live DVR stream
is-embeddedwhile the player is embedded at an external site
is-errorafter a player error has occured
is-finishedafter playback has finished - view demo
is-fullscreenwhile the player is in fullscreen mode; native or not
is-helpwhile the help overlay is displayed
is-invertedwhile remaining time is shown instead of current position
is-livewhen the player is set up to play a live stream
is-longwhen the video duration exceeds 1 hour
is-loadingwhile the video is initially loading
is-mouseoutwhile the mouse is outside the player area
is-mouseoverwhile the mouse hovers over the player area
is-mutedwhile the player is muted
is-pausedwhile the player is paused
is-playingwhile the player is playing
is-posterwhile the player is in poster state
is-readyonce player and video are completely loaded
is-seekingwhile the player is seeking
is-splashwhile the splash screen is visible and awaits a click
is-touchwhen the device supports touch controls
The following of the above state classes can be specified by the user at
installation time in the same way as theme, timeline,
and icon modifier classes. Accordingly they also affect the player
behaviour and user experience. They work like configuration
options, and indeed adding the
is-splash class to the container
element has the same effect as setting
is-closeablethe player can be unloaded via a close button - fullscreen mode can only be toggled via the "f" keyboard shortcut
is-invertedtells the player to show the remaining time instead of the duration of the movie; can still be toggled by clicking on the time element view demo
Extension and plugin states
The following classes are dynamically applied to the container element as dynamic state indicators by player extensions or plugins:
is-audio-onlyAudio plugin (configurable state)
Here is the HTML layout rendered by the player. All elements inside the root are prefixed with "fp-" to avoid name collisions
Whether you are using the shipped skin or building your own from scratch Flowplayer skinning is all about writing CSS for the layout shown above and taking advantage of the and player state classes.
Control elements can be added or removed (hidden) with great ease.
Control elements are hidden via CSS. The following rule hides the duration indicator:
Note that the remaining control elements will align themselves automatically. There will be no gap where the duration indicator was hidden.
Elements can be added to the controlbar -
.fp-controls - and header -
.fp-header - UI elements. Take a look at
which shows how to move the fullscreen button from the header element to the
Similarly to hiding control elements the other elements adjust themselves automatically.
Custom UI elements
You can add your own UI elements to the player area. To be operational - e.g.
clickable - they must be stacked on top of the Flowplayer UI in the z-axis with
z-index of at least
1. As This also applies to added elements interfacing
existing Flowplayer functionality or extensions.
An added element with the magic
class="fp-toggle" behaves like a play button:
it toggles between paused and playing state by invoking the
API method. That way you can add a complete custom playback
control without any extra scripting.
This comes in handy for example if you want to add a customized replay button.
For commercial setups, a custom context menu can be added by inserting the following html inside the player container:
An example of this customization is shown in the complete commercial setup demo.
To hide the logo on the origin domain and show it only on foreign sites the player is shared to, simply hide the logo with your site's CSS:
The code used for sharing will ignore this local CSS directive, and the logo will be visible as intended.
Migration from Version 6
There is only one (default) skin to load. All easy customization is done by adding CSS classes.
Context menu items are not list items anymore. The element
additionally requires the
The logo is always visible, also on the origin domain. The old behavior can be implemented with a simple CSS rule.