Local content - Overlays and Flash E-mail
Article Index
Local content
Flash Video
Shockwave Flash Video
Flash Animation
FLV with autostart
MP3 Playlist
MP4 (JW Media Player)
MP4 (Quicktime)
Preview Image
Popup and Lightbox
Overlays and Flash

Overlays and Flash

If you are using overlays - like in a menu for example - on your site, you will notice, that the menu is displayed behind the player. Most likely, this is not what you want. To get the overlay displayed above the player, you must change two settings: Flash's display mode (the wmode) and the z-index of either your overlay element or the player (or even both). By default, AVR sets Flash's wmode to window. The reason for that is: It's the mode with the highest performance. The two other possible modes (named opaque and transparent) decrease performance slightly. (opaque is a little bit better than transparent). Changing this mode can be done either globally in the parameters of the plugin named Content - AllVideos Reloaded (the relevant parameter is named Flash display mode there), or just for a single media tag by using the attribute wmode="opaque" (or "transparent"). The z-index is a general style parameter of any HTML element. It describes, how "far away" an element is positioned seen from the viewer's standpoint. Normally, all elements on a page have the default z-index 0. Elements with a z-index greater than 0 are positioned above the other elements, closer to the viewer. Elements having a z-index smaller than 0 are positioned below the other elements, farther away from the viewer. In order to position an overlay element above the player, it therefore has to have a z-index greater than the the player's z-index. You can set the z-index of any element using the following CSS:

.classname {
   z-index: n;

where n is an integer value (positive or negative).

By default, the classname of the player is allvideos. You have to find out the classname of your menu yourself.

In the example below, I have added some JavaScript so that you can play around with the z-index of the elements. This should easily give you an impression about how all these settings affect the display behavior. The left player uses a wmode of window, while the right player uses opaque. When you play around, you will notice, that Flash honors the z-index only, if wmode is not window. In this example, the right player and the yellow div (representing the menu) "disappear" if you assign them a negative value, because the global background of the page is opaque white.



Test Test Test Test Test Test Test Test Test Test Test Test Test Test

Left player's z-index: Yellow div's z-index: Right player's z-index:

If you want to get more information about how z-index works, you should read this article.

Last Updated ( Thursday, 03 February 2011 00:15 )