This is a message.

Background image on the control bar

Making it blend even more with your web page

standalone demo

Here we have set up a background image for the control bar. Its a JPG image with a simple repeating leather pattern. This is a very powerful way of skinning your player and making it match your website. Also the control bar's colors and positioning have been changed a bit.

Changing the image at runtime

You can use the scripting API to change the background image at runtime using following code.

function changeBg(){
$f().getControls().css({backgroundImage: 'url(/media/img/demos/3m.jpg)'});



flowplayer("player", "", {
// use the first frame of the video as a "splash image"
clip: {
autoPlay: false,
autoBuffering: true
// controlbar settings
plugins: {
controls: {
// set up a background image
background: 'url(/media/img/player/skin_leather.png) no-repeat',
/ you may want to remove the gradient /
// backgroundGradient: 'none',
// these buttons are visible
// custom colors
bufferColor: '#333333',
progressColor: '#cc0000',
buttonColor: '#cc0000',
buttonOverColor: '#ff0000',
// tooltip background color (since 3.1.0)
tooltipColor: '#cc0000',
// custom dimension
height: 25,
width: 400,
// set up auto hide
autoHide: 'always',
// a little more styling
width: '80%',
bottom: 5,
left: '50%',
borderRadius: 15