overlay and expose.
Press the fullscreen button on the player and you can see the effect.
This code is assembled so that you can define the fullscreen size by simply
adjusting a single CSS width setting. Also note that you can use a custom
background image for the fullscreen and define a custom color for the
expose effect. These settings makes it easy to customize the
visuals and "skinning" of this effect.
How does it work?
We are using the onBeforeFullscreen event for the custom fullscreen action which
does the following things:
launches overlay with expose effect
pause the player and make it hidden while overlay "grows"
disable fullscreen button on the controlbar when overlayed
disable default fullscreen action by returning false
When the overlay is closed following things occur:
place our player to the original size/position (position info is stored in a
enable fullscreen button again
remove expose (remove the darkened browser canvas)
The player is installed with the custom fullscreen action. When it is loaded its
original position is saved.
When the overlay is loaded the player is positioned over it.
NOTE. When Flowplayer is playing it is possible to move and resize it while it
is playing. This requires that the container is initially relatively or absolutely
static to relative for example the playback starts from the beginning.