FF3/Windows CSS z-index problème avec le lecteur YouTube

Question

Je suis bloqué sur ce qui semble être un CSS/z-index conflit avec le lecteur YouTube. Dans Firefox 3 sous Windows XP, jetez un oeil à cette page: http://spokenword.org/program/21396 Cliquez sur le bouton "encaisser" et note que le pop-up <div> apparaît sous le lecteur YouTube. Sur d'autres navigateurs <div> apparaît sur le dessus. Il a un z-index de la valeur de 999999. J'ai essayé de réglage de la z-index de l'élément <object> contenant le lecteur à une valeur plus faible, mais cela ne fonctionne pas. Aucune idée de la façon d'obtenir le pop-up sur le joueur?

Answer 1

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

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

<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

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

Mise À Jour, Février 2014

Il a été un moment et c'est peut-être obsolète.

Quelqu'un a signalé que maintenant &wmode=transparent des oeuvres la place.

Answer 3

j'ai trouvé un pur JS fonction de fixer dans tous les navigateurs!

là vous allez:

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 le chargement de la page avec jQuery:

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

Answer 4

Nous utilisons jQuery Flash plugin pour convertir des liens YouTube vers des animations Flash. Dans ce cas, wmode est passé comme une option pour obtenir la vidéo sur YouTube pour apparaître sous le jQuery boîte de Dialogue de nous ouvrir:

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

Answer 5

J'ai remarqué que wmode="opaque" terriblement affecte l'utilisation de l'UC. Chrome rendre sur mon bloc-notes de 50% d'utilisation du PROCESSEUR (sans opaque ~8%).
Soyez donc prudent avec cette option.