Vídeo do YouTube incorporado via iframe Ignorando o z-index?

Estou tentando implementar um menu de navegação suspensa multinível horizontal. Imediatamente abaixo (verticalmente) do menu, tenho um vídeo do YouTube incorporado via iframe. Se eu passar o mouse sobre um dos itens de navegação de nível principal no Firefox, o menu suspenso aparecerá corretamente na parte superior do vídeo.

No Chrome e IE9, no entanto, apenas uma parte da lista suspensa é visível na pequena região de espaço que tenho entre o menu e o iframe. O resto parece estar por trás do iframe.

O problema parece estar relacionado ao vídeo do YouTube, não ao iframe. Para testar, direcionei o iframe para outro site, e não para o vídeo, e o menu suspenso funcionou bem, mesmo no IE.

• Pergunta 1: WTF?
• Pergunta 2: Por que, mesmo se eu explicitar z-index:-999 !important; o iframe, esse problema ainda ocorre?

Existe algum CSS interno que o código de incorporação do YouTube inclua que de alguma forma substitua as coisas?

Tente adicionar o wmode, ele parece ter dois parâmetros.

&wmode=Opaque

&wmode=transparent

Não consigo encontrar um motivo técnico pelo qual ele funcione ou muito mais explicações, mas veja esta consulta .

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

ou isto

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

A resposta de Joshc estava no caminho certo, mas descobri que ela exclui totalmente a string de consulta?rel=0 e a substitui pelo ?wmode=transparentitem - que tem o efeito de exibir a lista de vídeos sugeridos do YouTube no final da reprodução, mesmo que você não tenha originalmente ' Não quero que isso aconteça.

Alterei o código para que o srcatributo do vídeo incorporado seja verificado primeiro, para ver se já existe um ponto de interrogação ?(porque isso denota a presença de uma sequência de consulta pré-existente, que pode ser algo parecido, ?rel=0mas poderia, em teoria qualquer coisa que o YouTube escolha anexar no futuro). Se já existe uma string de consulta, queremos preservá-la, não destruí-la, porque representa uma configuração escolhida por quem colou neste vídeo do YouTube e, provavelmente, a escolheu por um motivo!

Portanto, se ?for encontrado, wmode=transparentele será anexado usando o formato: &mode=transparentpara marcá-lo no final da cadeia de consulta preexistente.

Se não ?for encontrado, o código funcionará exatamente da mesma maneira que originalmente (na postagem de toomanyairmiles ), acrescentando apenas ?wmode=transparentuma nova string de consulta ao URL.

Agora, independentemente do que pode ou não estar no final do URL do YouTube como uma string de consulta, ele é preservado e os wmodeparâmetros necessários são injetados ou adicionados sem danificar o que estava lá antes.

Aqui está o código para inserir em sua document.readyfunção:

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

Basta adicionar um desses dois ao src url:

&wmode=Opaque

&wmode=transparent

<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

Eu tenho o mesmo problema no YouTube iframe incorpora apenas no Internet Explorer embora.

O índice Z estava sendo totalmente ignorado ou o vídeo em flash estava aparecendo no índice mais alto possível.

Foi isso que eu usei, adaptando levemente o script jquery acima.

Meu código de incorporação, direto do YouTube ...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

O jQuery ligeiramente adaptado da resposta acima ...

$('iframe').each( function() {
    var url = $(this).attr("src")
    $(this).attr({
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    })
});

Basicamente, se você não selecionar Mostrar vídeos sugeridos quando o vídeo terminar nas configurações de incorporação, você terá um ?rel=0no final do seu "src"URL. Então, eu adicionei o bit de substituição, caso ?rel=0exista. Caso contrário ?wmode=transparent, não funcionará.

Podemos simplesmente adicionar ?wmode=transparentao final do URL do YouTube. Isso instruirá o YouTube a incluir o vídeo com o conjunto wmode. Portanto, seu novo código de incorporação terá a seguinte aparência: -

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

Somente este funcionou para mim:

<script type="text/javascript">
var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        src = frames[i].src;
        if (src.indexOf('embed') != -1) {
        if (src.indexOf('?') != -1) {
            frames[i].src += "&wmode=transparent";
        } else {
            frames[i].src += "?wmode=transparent";
        }
    }
}
</script>

Eu o carrego no arquivo footer.php do Wordpress. Código encontrado no comentário aqui (obrigado Gerson)

wmode = opaco ou transparente no início da minha string de consulta não resolveu nada. Esse problema para mim ocorre apenas no Chrome e não em todos os computadores. Apenas um processador. Também ocorre nas incorporações do vimeo e possivelmente em outras.

Minha solução para anexar ao evento 'mostrado' e 'oculto' dos modais de auto-inicialização que estou usando, adicione uma classe que defina o iframe para pixels 1x1 e remova a classe quando o modal for fechado. Parece que funciona e é simples de implementar.

As respostas acima realmente não funcionaram para mim, eu tive um evento de clique no invólucro e, por exemplo, 7,8,9,10 ignorou o índice z, portanto, minha correção foi dar ao invólucro uma cor de fundo e, de repente, funcionou . Embora fosse suposto ser transparente, defini o invólucro com a cor de fundo branco e depois a opacidade 0,01, e agora funciona. Eu também tenho as funções acima, então pode ser uma combinação.

Eu não sei por que funciona, estou feliz por fazer.

O código Javascript do BigJacko funcionou para mim, mas no meu caso eu tive que adicionar um código "noconflict" do JQuery. Aqui está a versão revisada que funcionou no meu site:

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j){
  $j('iframe').each(function() {
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) {
        $j(this).attr({
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        });
      }
      else {
        $j(this).attr({
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        });
      }
   });
});
</script>

Tudo o que você precisa no iframe é:

...wmode="opaque"></iframe>

e no URL:

http://www.youtube.com/embed/123?wmode=transparent