web-dev-qa-db-fra.com

FF3 / Windows CSS z-index problem with YouTube player

Je suis coincé sur ce qui semble être un conflit CSS/z-index avec le lecteur YouTube. Dans Firefox 3 sous Windows XP, consultez cette page: http://spokenword.org/program/21396 Cliquez sur le bouton Collecter et notez que la pop-up <div> apparaît sous le lecteur YouTube. Sur les autres navigateurs, le <div> apparaît en haut. Il a une valeur d'index z de 999999. J'ai essayé de définir le z-index de l'élément <object> contenant le lecteur sur une valeur inférieure, mais cela n'a pas fonctionné. Une idée de comment faire apparaître le pop-up sur le lecteur?

cssflashfirefoxyoutubez-index
43
Doug Kaye

Essayez d'ajouter le paramètre wmode à opaque comme ceci:

(Notez qu'il est inclus dans les deux un <param> tag et un attribut wmode sur le <embed> tag.)

<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>
100
CMS

bien que la recommandation de CMS soit valide, il y a une mise à jour importante. Si vous souhaitez utiliser 'iframe' au lieu de 'embed', ajoutez simplement ?wmode=transparent à votre lien vidéo et cela fait la magie. Je trouve cela plus simple et plus propre.

Mise à jour, février 2014

Cela fait un moment et cela peut être obsolète.

Quelqu'un a signalé que maintenant &wmode=transparent fonctionne à la place.

15
ılǝ

j'ai trouvé une fonction JS pure qui la corrige dans tous les navigateurs!

voilà:

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);
        }
    }
}

maintenant, vous pouvez simplement exécuter lorsque la page se charge avec jQuery:

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

Nous utilisons plugin jQuery Flash pour convertir les liens YouTube en films Flash. Dans ce cas, wmode est passé en option afin que la vidéo YouTube apparaisse sous la boîte de dialogue jQuery que nous ouvrons:

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

J'ai remarqué que wmode = "opaque" affecte terriblement l'utilisation du CPU. Chrome faire sur mon ordinateur portable 50% d'utilisation du processeur (sans opaque ~ 8%).
Soyez donc prudent avec cette option.

1
Wojciech Kulik