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

Question

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

Answer 1

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

(Notez qu'il est inclus dans deux une étiquette <param>et un attribut wmode sur l'étiquette <embed>.)

<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

Nous utilisons jQuery Flash plugin pour convertir des liens YouTube en films Flash. Dans ce cas, wmode est passé comme une option afin d'obtenir le dessous de la boîte de dialogue jQuery nous ouvrons la vidéo à apparaître YouTube:

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

Answer 3

j'ai trouvé une pure fonction JS qui le fixent 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 juste lancer quand la page se charge avec jQuery:

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

Answer 4

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

Mise à jour, février 2014

Il a été un certain temps et cela peut être obsolète.

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

Answer 5

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