Playing with container background Skinning - Demo 4 / 10
Introduction
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 CSS padding property for the container. Click on the image to see the video running!
HTML coding
Place some HTML inside container, so that player wont start until user clicks on the container.
<!-- player container. it uses a background image and CSS settings are shown later -->
<a id="splash" href="http://blip.tv/file/get/N8inpasadena-Flowers457.flv">
<!-- place some HTML inside container -->
</a>CSS coding
Here is our CSS code that does all the magic.
/* container */
#splash {
/* background image */
background:transparent url(/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
}JavaScript coding
Player is setup just like before. Only coloring and controlbar settings have been tweaked a little.
$f("splash", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.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
}
}
});
Show this demo as a standalone page