jQuery style Ui dialog over flash banners

I was doing some extra job for one of the clients, some changes on the web site full of blinking flash banners. Idea was to get users’ attention even more by displaying some floating windows… lovely … Obvious choice would be jQuery modal dialog… So I made it … Unfortunately it has shown up that some of the flash banners remain ‘over’ the dialog, and some of them don’t. After digging into that I figured out that the reason behind that is one of flash parameters: “wmode” (thanks God this is not another inner flash issue). From Adome Knowledge base: wmode - Possible values: window, opaque, transparent. Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser. window - movie plays in its own rectangular window on a web page. opaque - the movie hides everything on the page behind it. transparent - the background of the HTML page shows through all transparent portions of the movie. This option can slow animation performance. So, to fix that You need to set this parameter to ‘transparent’. Fortunately all flash objects were placed with swfobject scripts. Sample code to fix that issue may look like may look like (video from YouTube):

    $(document).ready(function () {
        // The video to load.
        var videoID = "xxx";
        // Lets Flash from another domain call JavaScript
        var params = { allowScriptAccess: "always", wmode: "transparent" };
        // The element id of the Flash embed
        var atts = { id: "ytPlayer" };
        // All of the magic handled by SWFObject 
        swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=player1",
                       "videoDiv", "420", "258", "8", null, null, params, atts);

Hope this saves some of Your precious time…

comments powered by Disqus