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…

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.

Leave a Reply

Your email address will not be published. Required fields are marked *