Loading background · Flowplayer

To style the background of the player while it loads and keep the default setup of displaying the first frame of the video on load, put the container element inside a wrapper element, and give CSS directives for the wrapper element. Styling the player background itself would result in a poster setup.

We use a long video to extend the loading time.

<head/>

<style>

.fpwrapper {
   background: #333 url(/img/loading.gif) center no-repeat;
   background-size: 10%;
   width: 60%;
}

<body/>

<div class="fpwrapper">
   <div data-ratio="0.75" class="flowplayer">
      <video preload>
         <source type="video/mp4"   src="http://media.blacktrash.org/ccc.mp4">
         <source type="video/webm"  src="http://media.blacktrash.org/ccc.webm">
         <source type="video/ogg"   src="http://media.blacktrash.org/ccc.ogv">
      </video>
   </div>
</div>