This is a message.

Pimp your player background

Make the player blend into your web page

 
standalone demo

This demo has a large container with a background image specified with CSS. The video screen is placed inside the "Hello world" screen. This sizing/positioning is achieved by using the padding CSS property. Click on the image to see the video running!

HTML

Place some HTML inside container, the player won't start until user clicks on the container. 

<a href="http://stream.flowplayer.org/N8inpasadena-Flowers457.flv" id="splash">
    <!-- place some HTML inside container -->
    &nbsp;
</a>

HTML

CSS

Here is our CSS code that does all the magic. 

/ container /
section.blurb .box{
    padding: 0px 3px;
}
#splash {
 
    / background image /
    background:transparent url(/media/img/demos/helloworld.jpg) no-repeat scroll 0%;
 
    / container dimensions /
    display:block;
    height:232px;
    width:388px;
 
    / padding will show the surroundings even when the player is loaded /
    padding:55px 76px 93px 236px;
 
    / make play button centerered horizontally /
    text-align:center;
    color:#fff
}

CSS

Javascript

Other than a few coloring and control bar adjustments the player configuration is very vanilla. 

$f("splash", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",{
    // use a "sky blue" background on the player canvas
    canvas: {
        backgroundColor:'#18b9ed',
        backgroundGradient: 'high'
    },
 
    // adjust screen height
    screen: {
        height:232,
        bottom:0
    },
 
    // use a minimalistic controlbar
    plugins:  {
        controls:  {
            backgroundGradient: 'none',
            backgroundColor: 'transparent',
            all:false,
            scrubber:true
        }
    }
 
});

JavaScript