Player skinning

For maximum flexibility, you can customize the look and feel of the player. This can be accomplished by using CSS to enhance and modify different elements and components listed on this page.

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:

Copy

Copied

.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:

Copy

Copied

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 and/or bottom instead. See below for details on skinning options.

Skinning options

Wowza Flowplayer design 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 Wowza Flowplayer sandbox.

Modifier CSS classes

logo-on-right — Displays the configured logo in the top right corner instead of the default top left.
logo-on-bottom — Displays the configured logo in the 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 auto play similar to what you 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 control bar that becomes taller when the mouse hovers over the player.

CSS modifier sample code

Copy

Copied

<div id="player" class="use-drag-handle use-thin-controlbar use-play-2 logo-on-right"></div>
<script>
flowplayer("#player", {
  src: "my-source.m3u8",
  logo: "https://flowplayer.com/images/acme-logo.png"
})
</script>

CSS variables

Since version 3.0, the player skin uses CSS variables to define overridable properties. For instance, you can control 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:

Copy

Copied

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

The following is a list of the icon 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 — A solid pause icon.
fp-pause-stroke-icon — An outlined pause icon. See Modifier CSS classes section.
fp-volume-icon — A volume icon.
fp-fs-icon — A fullscreen icon.
fp-fs-exit-icon — An exit fullscreen icon.
fp-unmute-icon — An unmute icon.
fp-mute-icon — A mute icon.
fp-close-icon — An X close icon.

Player states

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

Copy

Copied

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

State classes let you change the player dynamically during the lifetime of a player. The following is a full list of state classes:

is-ad-playing — When an add is being played.
is-ended — When the playback is ended.
is-fullscreen — When the player is on fullscreen mode.
is-hovered — When the mouse is hovering over the player.
is-loaded — After the player is loaded and a 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 the player is muted.
is-paused — When the player is paused.
is-seeking — When the player is seeking.
is-small — When the player is less than 600px wide.
is-starting — When "autoplay" is set to false and playback is not yet started.
is-tiny — When the 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 if your video does not contrast with the controls, create a custom <style>:

Copy

Copied

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

Then add the created CSS class to the root element:

Copy

Copied

<div id="player" class="use-controlbar-background"></div>
<script>
flowplayer("#player", {
  src: "my-source.m3u8",
  logo: "https://flowplayer.com/images/acme-logo.png"
})
</script>