
Developers
Player
Developers
Player
Modifying the appearance of the player with CSS
Most settings on this aricle are available on our WYSIWYG skin builder.
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
CSS configuration class to place it on top/right instead. See below for details on the skinning options.
Flowplayer looks can be altered with extra CSS modifier classes added to the root element (container) of the player.
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.
<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>
Alternatively, you can also control the appearance of several UI elements through the player configuration.
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>
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
Live streaming
Live analytics
Ad scheduling
Monetization