I have recently stumbled into a problem with a media section of a site I am working on where users can view video clips.  As is the norm now-days, I am using an flv that progressively downloads from my web server to the client.  The area is pretty much like a YouTube section of the site where the user picks or searches from a database of video clips, then upon choosing their clip views this on another page.

The problem reared its ugly head because unlike youtube, this site used a menu that drops down over the flash video.

This is easily curable using the wmode=transparent  parameter that allows elements to be displayed over the flash object.

<param name=”wmode” value=”transparent”> – to be added to the OBJECT tag
wmode=”transparent” – to be added to the EMBED tag

However, my issue came with also wanting the user to be able to display the video in full screen.  At first I thought it was just a case of using a skin with the full screen option.  But upon reading further I found I also needed the  “allowfullscreen” parameter set to true.
Again, not a problem, once it was set it worked like a dream… until I set both wmode and allowfullscreen.  That’s when things fell over.

This is down to the software scaling which allowfullscreen uses to take over the users monitor.

I had a few options…

• Force users to upgrade their flash player as this problem is allegedly fixed in the very latest flash player – According to our stats this would impact on a lot of users, I always like to design to accommodate the highest percentage of users.
  http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
  http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode_print.html
   

  Full Screen mode

• Change the menu – Menus should always be consistent across any website… so not an option
• Open a new kiosk style media player…

Although it wasn’t a perfect solution, opening up a new media player would allow the full screen and provide another opportunity to display more information related to the video to the user.  Therefore this is what I opted for.

The final obstacle was stopping the current video (if playing) when the user pops up the media player.
This is possible using javascript to communicate with the current flash movie and then popping up the media player in the same function.
I found http://www.permadi.com/tutorial/flashjscommand/  – very useful.

So, there we go.  For the time being that’s my solution.  Still not perfect though, so I will keep an eye on my stats to see when the majority of users have the latest flash player installed.