Skinning

Modifying the appearance of the player with CSS

Skin builder

Most settings on this aricle are available on our WYSIWYG skin builder.

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;
}

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 CSS configuration class to place it on top/right 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.

Modifier CSS classes

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

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

You can see the effect of the skin modifiers in our skin builder.

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>

UI player options

Alternatively, you can also control the appearance of several UI elements through the player configuration.

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>

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