Flash on top of jQuery dialog

Question

I know many have asked this question, but I think my situation is a little bit different.

I have a site where I have some ads which is Flash hidden in a because of xhtml/html compatibility issues. But the flash elements is on top of my jQuery dialogs which is not ideal.

Some solutions have suggested setting wmode to opaque but I can't because my ads are scripts which outputs flash elements.

Another solution suggested hiding ads when a dialog is shown. So my question is: Is there a way to put flash content behind my jQuery dialogs while they are visible and without altering the flash code?

Best regards, Lasse Espeholt

Update: I have now reopned the question with a bounty. As for now, I hide every Flash ad on "show dialog". But this is still not an optimal solution. So, I'm looking for a script which can make every Flash animation to opaque (a jQuery solution would be nicest, but a plain JavaScript solution will do). Or if there should be another solution not discussed in this question, I'll be happy to hear about it :)

Update 2: So far, I have made this script:

function opaqueAllFlashMovies() {
    // Embed Flash movies
    $('embed[wmode!="opaque"]').attr('wmode', 'opaque').wrap('<div>');

    // Object flash movies with a wmode param
    $('object[classid$="-444553540000"] parem[wmode]').attr('value', 'opaque');
    // Object flash movies without a wmode param
    $('object[classid$="-444553540000"]').not('param[wmode]').append('<param name=\'wmode\' value=\'opaque\'/>').wrap('<div>');
}

which works in FF and Chrome but not in IE. Apparently, .append fails. Any ideas?

Lars Blåsjö · Accepted Answer · 2009-10-04T15:01:13.790

13

You can't put HTML in front of Flash unless you set wmode to opaque (or transparent).

With the default wmode ("window") the Flash Player takes over all rendering and user interaction in its area. So the browser can't display any HTML in that area. What wmode=" opaque" (or wmode="transparent") does is that it disables this default behavior and kind of integrates the Flash Player area in the browsers usual rendering and layering and such.

But you don't need to alter any Flash content to set wmode, since it is done in the HTML (or via SWFObject or other script that inserts the Flash object element) so if you have control over the "scripts which outputs flash elements" that you mention, you can take care of the wmode setting there.

edited Oct 04 '09 at 15:01

answered Oct 04 '09 at 14:39

Lars Blåsjö

6,118
2
19
23

I do not have control over the scripts. They are provided and can change every second if it should. I have my scripts in "iframes" tags. Can I set jQuery to edit wmode in every flash object including flash objects inside "iframes"? – Lasse Espeholt Oct 04 '09 at 15:11
OK, that's to bad. I don't know if you could make jQuery alter the flash object html code on the fly, but altering it once the flash has loaded may require a reload of the flash, I think, resulting in each ad being loaded twice. Hiding the ads when a dialog is displayed seems like the best solution so far, I think. – Lars Blåsjö Oct 04 '09 at 15:31
And people actually COMPLAINED when Jobs said he wasn't going to support Flash. Facepalm. – Winfield Trail Jun 26 '11 at 15:30
@Kerin, this is related to browser plugins rather than Flash, the same kind of issues can be seen with other plugins, like Unity player, and Java Applets (but than again, Apple doesn't support those either in iOS). – Lars Blåsjö Jun 26 '11 at 15:49

score 2 · Answer 2 · edited May 23 '17 at 12:11

i think i have a solution. Using the jquery-ui dialog, Spent hours and hours trying to figure this out - worked for me,

Logic was if i can't make the jquery go front, make all flash content go back. research took me to this link - finally finally it worked.

How do I programmatically set all <object>'s to have the wmode set to opaque?

function makeObjectsOpaque3() {
    var elementToAppend = document.createElement('param');
    elementToAppend.setAttribute('name', 'wmode');
    elementToAppend.setAttribute('value', 'opaque');
    var objects = document.getElementsByTagName('object');
    for(var i = 0; i < objects.length; i++) {
        var newObject = objects[i].cloneNode(true);
        elementToAppend = elementToAppend.cloneNode(true);
        newObject.appendChild(elementToAppend);
        objects[i].parentNode.replaceChild(newObject, objects[i]);
    }
}

window.onload = makeObjectsOpaque3;

and

if(window.onload) {
    var onLoad = window.onload;
    window.onload = function() {
        onLoad();
        makeObjectsOpaque3();
    };
} else {
    window.onload = makeObjectsOpaque3;
}

Hi, have you seen James comment on the same page? If it does not affect this, I'll try them all again then :) — Lasse Espeholt, Mar 15 '11 at 09:14

score 1 · Answer 3 · answered Oct 04 '09 at 13:34

1

How about manually setting wmode to opaque with javascript after the flash has already loaded?

answered Oct 04 '09 at 13:34

Mike Crittenden

5,779
6
47
74

score 1 · Answer 4 · answered Feb 22 '11 at 15:56

1

I have just read this post and tried to add parameter wmode="opaque" in an object tag. It works for IE 8. I'm sorry if my post is too late.

answered Feb 22 '11 at 15:56

Tan

11
1

1

Yes, this works. But as I state, I need it to work for ads where I can't control the script. – Lasse Espeholt Feb 22 '11 at 16:37

score 0 · Answer 5 · answered Apr 27 '11 at 12:45

0

Search google for "iframe shim". Basically putting an iframe behind the html will bring it over the flash content (ignoring wmode settings).

Bye bye

answered Apr 27 '11 at 12:45

pincopallo

643
5
2

This is one of the results: http://www.udm4.com/demos/extension-iframeshim.php. You can copy his approach to solve the problem... – pincopallo Apr 28 '11 at 08:08

Flash on top of jQuery dialog

5 Answers5

Linked