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

130

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?

user249493
fonte
Você pode postar um link - é difícil dar uma resposta útil sem código.
precisa saber é o seguinte
possível duplicação de z-index e iFrames!
stephanfriedrich
para qualquer um se perguntando como isso funciona na 2015, a <embed wmode="transparent" ...>seção é tudo que você precisa (pelo menos no firefox) e não há necessidade de se preocupar com a configuração wmode em url's param' s ou iframes
ROZZA
lembre-se de que, por algum motivo, existem dois tipos diferentes de links do youtube: youtube.com/v/video_id e youtube.com/embed/video_id . O link v ignora o z-index no IE, mas a incorporação funciona bem.
Anton Lyhin 12/01

Respostas:

243

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");
    });
});
toomanyairmiles
fonte
6
(Eu sou o OP) Obrigado a todos! Encontrei uma solução semelhante em manisheriar.com/blog/flash_objects_and_z_index A chave parece estar usando nome = "wmode" value = "transparent" em um <param> e wmode = "transparent" em <embed>. Como eu suspeitava, não é um problema de iframe. Parece ser um problema com o Flash desejando (exigindo?) O índice z mais alto, a menos que você o force a ser transparente.
precisa saber é o seguinte
5
Se você estiver usando a API JS iframe, o playerVar wmodetambém funcionará, embora não esteja documentado.
Richard M
1
Eu integrei isso e o meu fancybox ainda não funciona no ie7 / 8 e ainda recebo o vídeo no topo. encompasscu.com.au/homeiswheretheheartis o que posso fazer
Dan
6
A opção? Wmode = transparent funcionou como um encanto para mim. Eu só queria ser mais rápido em encontrar a pergunta certa a fazer. 24 horas depois que comecei a procurar, encontrei esta resposta. Obrigado por responder e postar a consulta acima também!
Djmarquette 31/03
1
@ Dan, veja minha edição ... você já pode ter uma string de consulta no seu código de incorporação do youtube. (como? rel = 0 para não exibir vídeos relevantes). Se for esse o caso, use & wmode = transparent (ou opaco - ouvi dizer que o opaco usa menos recursos do sistema, então eu o uso principalmente, a menos que tenha um motivo para torná-lo transparente).
21813 Sean Kendle
28

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"
    });
  }
});
BigJacko
fonte
Isso funcionou para mim, enquanto a resposta aceita não funcionou (mesmo depois de corrigir o código). Obrigado pela correção do drop-in.
Tom
? inicia a string de consulta do parâmetro, & é o delimitador. Coisas básicas. Veja stackoverflow.com/questions/2667551/…
cdonner
2
Isso corrigiu meu problema 10 segundos antes de desistir!
Malibur
1
Perfeito! Eu estava procurando isso por muito tempo!
Jeroen W
2
É opaquenão Opaque(note o caso)
Szymon Toda
6

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>
Code.Town
fonte
5

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á.


Joshc
fonte
2

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>
user3410247
fonte
Isso já foi sugerido em muitas respostas aqui, não sendo necessário repeti-lo com mais uma resposta. Se você tiver algo novo a adicionar, faça, caso contrário, não repita o que os outros já postaram.
Shadow Wizard é Ear For You
2

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)

dragoeco
fonte
1

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.

Danny
fonte
1

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.

Eduardo
fonte
1

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>
cclay
fonte
1

Tudo o que você precisa no iframe é:

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

e no URL:

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