Flash, flowplayer and nyroModal Overlays

It doesn’t take me to tell you that in today’s world Flash is a very popular way of presenting video content to your users, and almost as common is the use of overlays to present your users with alternative content or messages. This is usually supported by some javascript library such as the nyroModal JQuery plugin.

Unfortunately, sometimes the two don’t mix with the flash video appearing to “show through” the overlay, but is this really the case. The blog examines what’s really happening.

For convenience, Flash is more often than not displayed using flowplayer, as the blurb says, you can “pimp ¹ my video player” and “setup video for you website in 10 minutes”.

Setting up flowplayer is indeed very quick as it’s just a matter of importing the flowplayer script:

    <script src="path/to/the/flowplayer-3.2.6.min.js"></script>

… creating a div as a player container:

    <div style="width:425px;height:300px;" id="player"></div>

… and finally add a script to insert the player into the above div:

    <script language="JavaScript">
 flowplayer(
  "player", 
  "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", 
  "http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
 );
    </script>

All this has been taken from the flowplayer documentation, so I’m not going to dwell on it.

The point is that this is the default installation technique and in this mode the underlying flash is free to determine what it thinks is the best way to display a video, which includes choosing to host the video in its own child window that's pinned to the browser window in the appropriate location. This technique has the advantage of letting Flash optimize the video display using whatever graphics hardware it can find.

The browser will display everything else you see on a web page in its own window that is behind the flash window, so when you open nyroModal overlays they are displayed on the browser window, which is BEHIND the flash window. In short, it’s not a matter of the video showing through the overlay, but the overlay being part of the browser window that is BEHIND the flash window. Therefore, it doesn’t matter how many z-index attributes you set on your overlay divs, iframes etc. they will always be behind the flash child window.

Now, flash doesn’t have to display video content in a child window. It can choose to display it on the browser window mixed in with the other web page content. When this occurs the z-index attributes do work and you can ensure that overlays appear on top of the video.

To set flowplayer up so that it always plays on the browser window and behind overlays, you need to do something like this:

  <script language="JavaScript">
    flowplayer("player1", {src: 
http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf', wmode: 'opaque'}, {
        clip: {
          url: 'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv',
          autoPlay: true,
          autoBuffering: true
      },
      plugins: {
        controls: null
      },
      onLoad: function(){
        alert("player loaded");
      }
    });
  </script>

...where the crux of the matter is in setting an attribute called wmode to ‘opaque’.

The wmode attribute has two values: ‘opaque’ or ‘transparent’ and it doesn’t seem to matter which you use, so long as you use one of them, the Flash content will be displayed on the browser window.

Flowplayer has a whole page on how to set this up, and the nyroModal wiki also contains a some help.

There are advantages and disadvantages to using the wmode attribute, though my suggestion would be to always use it as you’ll be guaranteed not to be pestered with someone saying that you page doesn’t work because the video content is showing through an overlay.

---

¹ Though why flowplayer should want to associate itself with a “pimp”, which as dictionary.com puts it is: “
a person, especially a man, who solicits customers for a prostitute or a brothel, usually in return for a share of the earnings; pander; procurer”, I don’t know...