Problemas de incorporação de vídeo do YouTube e índice z

Ao incorporar um vídeo do YouTube usando um iframe abaixo de um menu suspenso de navegação multinível, você pode encontrar problemas em que o menu suspenso aparece atrás do vídeo no Chrome e no Internet Explorer. Ao passar o mouse sobre um item de navegação principal, o menu suspenso deve aparecer na parte superior do vídeo em todos os navegadores.

Pergunta 1: por que o menu suspenso aparece atrás do vídeo do YouTube no Chrome e no IE9?

Esse problema está relacionado ao vídeo do YouTube em si, não ao iframe. As incorporações do YouTube incluem CSS interno que substitui outras configurações de CSS, incluindo seus valores de índice z.

Pergunta 2: Por que a configuração de z-index:-999 !important; no iframe ainda causa o problema?

O CSS substituído no código incorporado do YouTube tem precedência sobre quaisquer configurações de índice z aplicadas ao iframe.

Solução:

Para corrigir esse problema, adicione o seguinte parâmetro ao vídeo incorporado URL:

&wmode=Opaque

Esta configuração permite que o vídeo se misture ao plano de fundo, permitindo que outros elementos da página apareçam em cima dele.

Notas adicionais:

• Você também pode usar o parâmetro wmode=transparent em vez de Opaque, embora isso possa resultar em problemas de transparência em alguns navegadores.
• Como alternativa, você pode usar jQuery para modificar o URL de todos os iframes em sua página antes de serem carregados, conforme mostrado no snippet de código abaixo:

$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url "?wmode=transparent");
    });
});