C'est en baillant que la loutre le dit:

Loutre avec écouteurs

Problème de z-index avec les videos Youtube

mer, 07/08/2013 - 15:26 -- mzw
Bug z-index

Ce problème se manifeste lorsqu'on a une video sur une page avec un menu déroulant, ou une fenêtre modale. La video (flash pouerk) se met par dessus le menu, même si la règle z-index est bien gérée. 

Si tu as ce problème (et qui, en général, arrive sur Chrom(e)(ium) et IE, mais pas sur Firefox), voici une solution très simple à implémenter.

Il suffit d'exécuter ce code jquery :

$(document).ready(function (){
  $('iframe').each(function() {
    var url = $(this).attr("src");
    if ($(this).attr("src").indexOf("?") > 0) {
      $(this).attr({
        "src" : url + "&wmode=transparent",
        "wmode" : "Opaque"
      });
    }
    else {
      $(this).attr({
        "src" : url + "?wmode=transparent",
        "wmode" : "Opaque"
     });
    }
  });
});

Ce code ajoute le paramètre &wmode=transparent à l'attribut src ainsi que wmode="opaque" en tant qu'attribut à toutes les balises iframe de la page.

 

Merci à stackoverflow et à EIF chez qui j'ai corrigé le problème.