FF3/Windows CSS Z-Index Problem mit YouTube Player

Question

Ich stecke an einem CSS/Z-Index-Konflikt mit dem YouTube-Player fest. Schauen Sie sich in Firefox 3 unter Windows XP diese Seite an: http://spokenword.org/program/21396 Klicken Sie auf die Schaltfläche Sammeln und beachten Sie, dass das Popupu003Cdiv> erscheint unter Der YouTube -Spieler. Auf anderen Browsern dieu003Cdiv> erscheint oben. Es hat einen Z-Index-Wert von 9999999. Ich habe versucht, den Z-Index der festzulegenu003Cobject> Element, das den Spieler zu einem niedrigeren Wert enthält, aber das hat nicht funktioniert. Gibt es eine Idee, wie man das Popup über dem Spieler erscheinen kann?

Answer 1

Versuchen Sie, das hinzuzufügen wmode Parameter sein opaque so was:

(Beachten Sie, dass es in enthalten ist beide a <param> Schild und a wmode Attribut auf der <embed> Schild.)

<object width='425' height='344'> 
    <param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <param name="wmode" value="opaque" />
    <embed width='425' height='344'
            src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
            type='application/x-shockwave-flash'
            allowfullscreen='true'
            allowscriptaccess='always'
            wmode="opaque"
    ></embed> 
    </object> 

Answer 2

Obwohl die Empfehlung von CMS gültig ist, gibt es ein wichtiges Update. Wenn Sie "iframe" anstelle von "einbetten" möchten, fügen Sie einfach hinzu ?wmode=transparent zu Ihrem Videolink und das macht die Magie. Ich finde das einfacher und sauberer.

Aktualisieren, Februar 2014

Es ist eine Weile her und das kann veraltet sein.

Jemand hat das jetzt berichtet &wmode=transparent funktioniert stattdessen.

Answer 3

Ich habe eine reine JS -Funktion gefunden, die sie in allen Browsern behebt!

laust du:

function fix_flash() {
    // loop through every embed tag on the site
    var embeds = document.getElementsByTagName('embed');
    for (i = 0; i < embeds.length; i++) {
        embed = embeds[i];
        var new_embed;
        // everything but Firefox & Konqueror
        if (embed.outerHTML) {
            var html = embed.outerHTML;
            // replace an existing wmode parameter
            if (html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i))
                new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i, "wmode='transparent'");
            // add a new wmode parameter
            else
                new_embed = html.replace(/<embed\s/i, "<embed wmode='transparent' ");
            // replace the old embed object with the fixed version
            embed.insertAdjacentHTML('beforeBegin', new_embed);
            embed.parentNode.removeChild(embed);
        } else {
            // cloneNode is buggy in some versions of Safari & Opera, but works fine in FF
            new_embed = embed.cloneNode(true);
            if (!new_embed.getAttribute('wmode') || new_embed.getAttribute('wmode').toLowerCase() == 'window')
                new_embed.setAttribute('wmode', 'transparent');
            embed.parentNode.replaceChild(new_embed, embed);
        }
    }
    // loop through every object tag on the site
    var objects = document.getElementsByTagName('object');
    for (i = 0; i < objects.length; i++) {
        object = objects[i];
        var new_object;
        // object is an IE specific tag so we can use outerHTML here
        if (object.outerHTML) {
            var html = object.outerHTML;
            // replace an existing wmode parameter
            if (html.match(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")[a-zA-Z]+('|")\s*\/?\>/i))
                new_object = html.replace(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")window('|")\s*\/?\>/i, "<param name='wmode' value='transparent' />");
            // add a new wmode parameter
            else
                new_object = html.replace(/<\/object\>/i, "<param name='wmode' value='transparent' />\n</object>");
            // loop through each of the param tags
            var children = object.childNodes;
            for (j = 0; j < children.length; j++) {
                try {
                    if (children[j] != null) {
                        var theName = children[j].getAttribute('name');
                        if (theName != null && theName.match(/flashvars/i)) {
                            new_object = new_object.replace(/<param\s+name\s*=\s*('|")flashvars('|")\s+value\s*=\s*('|")[^'"]*('|")\s*\/?\>/i, "<param name='flashvars' value='" + children[j].getAttribute('value') + "' />");
                        }
                    }
                }
                catch (err) {
                }
            }
            // replace the old embed object with the fixed versiony
            object.insertAdjacentHTML('beforeBegin', new_object);
            object.parentNode.removeChild(object);
        }
    }
}

Jetzt können Sie einfach eingehen, wenn die Seite mit JQuery geladen wird:

 $(document).ready(function () {
            fix_flash();    
 });

Answer 4

Wir gebrauchen JQuery Flash Plugin So konvertieren Sie YouTube -Links in Flash -Filme. In diesem Fall wird WMODE als Option übergeben, damit das YouTube -Video unter dem von uns geöffneten Jquery -Dialog angezeigt wird:

$('a[href^="http://www.youtube.com"]').flash(
    { width: nnn, height: nnn, wmode: 'opaque' }
);

Answer 5

Mir ist aufgefallen, dass WMODE = "undurchsichtig" auf die Verwendung der CPU schrecklich beeinflusst. Chrome Make On My Notebook 50% CPU -Verwendung (ohne undurchsichtigen ~ 8%).
Seien Sie also vorsichtig mit dieser Option.