SOURCE URL: https://flowplayer.org/docs/skinning.html

Skinning with CSS3

Flowplayer skin design is CSS3. There are 4 approaches

use the default skins with modifier classes
override default skins with your own CSS
clone our default skins and edit them. Our skin repository is in github
write a skin from scratch

Typically you use the combination of 1 and 2.

Default skins

Minimalist //releases.flowplayer.org/5.4.6/skin/minimalist.css
Functional //releases.flowplayer.org/5.4.6/skin/functional.css
Playful //releases.flowplayer.org/5.4.6/skin/playful.css

They look like this. To use a skin you can

Download it and put it on your servers. Perhaps combine with other CSS files
Reference it directly using the CDN URLs (Amazon CloudFront) shown above

We also provide a combined version with all skins. You can switch the skin with a CSS class name

<div class="flowplayer functional">
   <video>
      <source type="video/webm" src="http://mydomain.com/my/video.webm">
      <source type="video/mp4"  src="http://mydomain.com/my/video.mp4">
   </video>
</div>

This combined file is obviously a larger download so it's recommended to pick the one you like.

The default skins use node.js based Stylus to make CSS easier. Go ahead and play with the skins and please contact us if you have a good idea for a new skin! Check our email addresses from Github.

Right to left support

v5.4 Flowplayer inherently supports right-to-left layouts. On pages which have set RTL direction globally:

body {
   direction: rtl;
}

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:

body {
   direction: rtl;
}
.flowplayer {
   direction: ltr;
}

Modifier classes

Modifier classes are a simple way to alter the looks and/or behaviour of a skin. For example:

<div class="fixed-controls color-alt no-background">
   <video>
      <source type="video/webm" src="http://mydomain.com/my/video.webm">
      <source type="video/mp4"  src="http://mydomain.com/my/video.mp4">
   </video>
</div>

fixed-controls controlbar is statically placed below the video. no mouseover effect
aside-time times will be placed on top/left corner instead of the controlbar
color-alt alternate coloring
color-alt2 alternate coloring #2
color-light uses a dark controlbar. Optimal for light videos
no-background no background color
no-hover forces all UI elements to be visible ignoring the mouseover event
no-mute v5.2 hides the mute control
no-time v5.1 hides the time display, duration or remaining
no-volume v5.1 hides the volume control
play-button v5.3 display play button on the controlbar

You can see these modifier classes in action on our test suite.

Note: individual elements can be removed from a player with simple display: none setting. For example, to disable embedding you can do:

.fp-embed {
   display: none
}

States

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:

<div class="is-ready is-paused">
   <video>
      <source type="video/webm" src="http://mydomain.com/my/video.webm">
   </video>
</div>

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-closeable a close/unload button replaces the fullscreen toggler
is-disabled after the disabled() method was called
is-embedded while the player is embedded at an external site
is-embedding while the embedding dialog is visible
is-error after a player error has occured
is-finished v5.1 after playback has finished - view demo
is-flash while the Flash engine is in use and the OBJECT tag is present
is-fullscreen while the player is in fullscreen mode; native or not
is-help v5.1 while the help overlay is displayed
is-html5 while the HTML5 video engine is in use
is-live v5.4.4 when the player is set up to play a live stream (experimental)
is-long v5.3 when the video duration exceeds than 1 hour
is-loading while the video is initially loading
is-mouseout while the controls are hidden - unless the "fixed-controls" modifier class is applied
is-mouseover while the controls are shown
is-muted while the player is muted
is-paused while the player is paused
is-playing while the player is playing
is-poster while the player is in poster state
is-ready once player and video are completely loaded
is-seeking while the player is seeking
is-splash while the splash screen is visible and awaits a click
is-touch v5.4 when the device supports touch controls

CSS programming example

Let's assume you do not want to show the minimal timeline below the player while the mouse is outside the player area. You could achieve this with JavaScript in a global api instruction:

flowplayer(function (api, root) {
   root.hover(function () {
      $(".fp-timeline", root).css({
         height: /enter/.test(e.type) ? 10 : 0
      });
   });
});

Or you can simply tweak the CSS height directive for the timeline in the is-mouseout state class from 4px to 0:

.flowplayer.is-mouseout .fp-timeline {
   height: 0;
}

View the demo.

Configurable states

The following of the above state classes can be specified by the user at installation time in the same way as 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 splash: true in the JavaScript configuration.

is-closeable the player can be unloaded via a close button - fullscreen mode can only be toggled via the "f" keyboard shortcut
is-live v5.4.4 tells the player that it will play back a live stream, controls specific to video on demand are not shown; JavaScript alternative: live option - view demo
is-splash enforces a splash setup; JavaScript alternative: splash option
is-mouseover makes the UI elements initially visible

HTML layout

Here is the HTML layout rendered by the player. All elements inside the root are prefixed with "fp-" to avoid name collisions

<!-- player root -->
<div class="flowplayer">
 
   <!--
      A magic element that specifies the aspect ratio on different screen sizes
      http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
   -->
   <div class="fp-ratio" style="padding-top:41.7%"></div>
 
   <!-- video or object tag depending on browser support (here it's just DIV) -->
   <div class="fp-engine"></div>
 
   <!-- user interface -->
   <div class="fp-ui">
 
      <!-- progress indicator -->
      <div class="fp-waiting"><em></em><em></em><em></em></div>
 
      <!-- buttons -->
      <a class="fp-fullscreen"></a>
      <a class="fp-unload"></a>
 
      <!-- timeline and volume. nested inside controls -->
      <div class="fp-controls">
 
         <!-- play button disabled by default, enable with play-button modifier class -->
         <a class="fp-play"></a>
 
         <div class="fp-timeline">
            <div class="fp-buffer" style=" 70%;"></div>
            <div class="fp-progress" style=" 35%;"><em></em></div>
         </div>
 
         <div class="fp-volume">
            <a class="fp-mute"></a>
            <div class="fp-volumeslider">
               <div class="fp-volumelevel" style=" 50%;"><em></em></div>
            </div>
         </div>
 
      </div>
 
      <!-- time -->
      <div class="fp-time">
         <em class="fp-elapsed">00:00</em>
         <em class="fp-remaining">-00:44</em>
         <em class="fp-duration">01:44</em>
      </div>
 
      <!-- error message -->
      <div class="fp-message">
         <h2>Invalid URL</h2>
         <p>http://invalid.url/com/my-video.mp4</p>
      </div>
 
      <!-- embedding -->
      <a class="fp-embed" title="Copy to your site"></a>
 
      <div class="fp-embed-code">
         <label>Paste this HTML code to your site.</label>
         <textarea>
            <!-- actual content on textarea -->
            <script src="//releases.flowplayer.org/5.4.6/embed.js">...</script>
         </textarea>
      </div>
 
   </div>
 
   <!-- help overlay -->
   <div class="fp-help">
      <a class="fp-close"></a>
      <div class="fp-help-section fp-help-basics">
         <p><em>space</em>play / pause</p>
         <p><em>esc</em>stop</p>
         <p><em>f</em>fullscreen</p>
         <p><em>shift</em> + <em>&#8592;</em><em>&#8594;</em>slower / faster</p>
      </div>
      <div class="fp-help-section">
         <p><em>&#8593;</em><em>&#8595;</em>volume</p>
         <p><em>m</em>mute</p>
      </div>
      <div class="fp-help-section">
         <p><em>&#8592;</em><em>&#8594;</em>seek</p>
         <p><em>&nbsp;. </em>seek to previous
         </p><p><em>1</em><em>2</em>&hellip;<em>6</em> seek to 10%, 20%, &hellip;60% </p>
      </div>
   </div>
 
   <!-- logo (hidden logic in javascript / flash) -->
   <a class="fp-logo" href="http://flowplayer.org" target="_top">
      <img src="//d32wqyuo10o653.cloudfront.net/logo.png" />
   </a>
 
   <!-- subtitles -->
   <div class="fp-subtitle">
      <p>This is the first line</p><br/>
      <p>And the second one.</p>
   </div>
 

   <!-- any custom HTML goes here -->
   
</div>

Whether you are using the default skins or building your own from scratch Flowplayer skinning is all about writing CSS for the layout shown above and taking advantage of the modifier classes and player states.

When "fp-time" element is clicked a "is-inverted" class name is toggled on that element. With the default skins this is used to toggle visibility between "fp-duration" and "fp-remaining" elements.

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. As the Flowplayer UI has a z-index of 1 you have to pass a z-index CSS directive of at least 2 to those elements. This also applies to added elements interfacing existing Flowplayer functionality or extensions. For instance you can display the 'previous' and 'next' playlist controls in the player area like in this demo.

Similarly any interactive overlayed element must be stacked on top accordingly, for instance if cuepoints should be clickable links as shown here.

v5.4.4 For commercial setups, a custom context menu can be added by inserting the following html inside the player container:

<div class="fp-context-menu">
  <ul>
    <li><a href="#">First menu item</a></li>
    <li><a href="#">Second menu item</a></li>
  </ul>
</div>

An example of this customization is shown in the complete commercial setup demo.

Flowplayer-Skin