Fixed postioning for the player Skinning - Demo 10 / 10

Introduction

Take a look at the upper right corner and use the scrollbar. Flowplayer can be placed on the page so that it is always visible on the same place althought the scrollbar is used. This kind of setup may be useful in advertising. This kind of setup can be achieved with a very simple CSS trick which is described in this demo.

User's may find it useful to show and hide the player because it is overlapping the actual content. Flowplayer scripting comes to a rescue here and such actions are easy to implement:

Hide player Show player

<p>
	<button onClick="$f().hide()">Hide player</button>
	<button onClick="$f().show()">Show player</button>
</p>

HTML code

Just a simple player container here.

<a id="player" href="http://flowplayer.org/video/flowplayer-700.flv"></a>

JavaScript code

A very simple player installation without the controlbar.

$f("player", "/swf/flowplayer-3.1.5.swf", {plugins: {controls: null}});

CSS code

This is where the magic happens. We use standard CSS fixed positioning which works for Flash objects too in a cross browser manner.

#player {
	/* player dimension */
	width:225px;
	height:145px;
	display:block;
	
	/* fixed position to the top right corner */
	position:fixed;
	right:12px;
	top:12px;	
}