Skip to content
Wowza Flowplayer
/
/
Skinning
Last updated

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:

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

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

CSS modifier sample code

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

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

Player states

The player can be in various states during playback. 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
}

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

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

Then add the created CSS class to the root element:

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