sobrepor div opaco sobre iframe do youtube

110

Como posso sobrepor um div com opacidade semitransparente em um vídeo incorporado de iframe do youtube?

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>

CSS

#overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

editar (mais esclarecimentos): HTML5 está se aproximando de nós, com mais e mais dispositivos que o usam em vez de flash, o que complica a incorporação de vídeos do youtube, felizmente o youtube fornece um iFrame especial incorporável que lida com todos os problemas de compatibilidade de incorporação de vídeo, mas agora o método de trabalho anterior de sobrepor um objeto de vídeo com um div semitransparente não é mais válido, agora não posso adicionar um <param name="wmode" value="transparent">ao objeto, porque agora é um iFrame, então como faço para adicionar um div opaco em cima de o vídeo incorporado do iframe?

— Timo Huovinen
fonte

1

Parece que o youtube corrigiu o problema completamente.

— Timo Huovinen

1

Ainda posso ver o problema no Chrome.

— scribu

@scribu podem ser problemas de segurança do flash ou estou faltando alguma coisa, testei em um servidor local.

— Timo Huovinen

Provavelmente. De qualquer forma, a solução do anataliocs funcionou para mim.

— scribu

Você pode adicionar a tag do youtube a esta pergunta?

— anataliocs

210

Informações do site oficial da Adobe sobre este assunto

O problema é quando você incorpora um link do youtube:

https://www.youtube.com/embed/kRvL6K8SEgY

em um iframe, o wmode padrão é em janela, o que essencialmente dá a ele um índice z maior do que todo o resto e se sobrepõe a qualquer coisa.

Tente anexar este parâmetro GET ao seu URL:

wmode = opaco

igual a:

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

Certifique-se de que seja o primeiro parâmetro no URL. Outros parâmetros devem seguir

Na tag iframe:

Exemplo:

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

— anataliocs
fonte

1

Informações da Adobe sobre o problema: http://kb2.adobe.com/cps/155/tn_15523.html . Apenas para registro.

— Wacek

15

Observe que a correção wmode = transparent só funciona se for primeiro

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

Não

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

— Mike
fonte

11

~~Hmm ... o que há de diferente dessa vez? http://jsfiddle.net/fdsaP/2/~~

~~Renderiza bem no Chrome. Você precisa de vários navegadores? Realmente ajuda ser específico.~~

EDIT : Youtube renderiza o objecte embedsem conjunto explícito de wmode, o que significa que o padrão é "janela", o que significa que sobrepõe tudo . Você precisa:

a) Hospede você mesmo a página que contém o código do objeto / incorporação e adicione o elemento param wmode = "transparent" ao objeto e o atributo a incorporar se você escolher servir os dois elementos

b) Encontre uma maneira de o youtube especificá-los.

— Meder Omuraliev
fonte

Sim, descobri qual era o problema, no firefox e no cromo ele funciona com fundos normais, adicionando opacidade faz com que ele brilhe ... o seu também brilha.

— Timo Huovinen

editei o exemplo do iframe para ter a aparência do meu. jsfiddle.net/fdsaP/6

— Timo Huovinen

Então ... você deseja que a opacidade se aplique ao elemento object / embed dentro do iframe?

— meder omuraliev

sim, não notei que o iframe foi sobreposto porque para mim o objeto está cobrindo o iframe completo, preciso que o vídeo seja coberto se possível, caso contrário, substituirei por um div preto da mesma largura / altura e posição.

— Timo Huovinen

@meder, obrigado pelo link e solução! tentarei agora, mas o flash ainda pode ser clicado :)

— Timo Huovinen

2

Passei um dia mexendo com CSS antes de encontrar a dica do anataliocs. Adicione wmode=transparentcomo parâmetro ao URL do YouTube:

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
    width="640" 
    height="390" 
    style="border:none;">
</iframe>

Isso permite que o iframe herde o z-index de seu contêiner, de forma que o opaco <div>fique na frente do iframe.

— user605723
fonte

0

A sobreposição opaca é para fins estéticos?

Nesse caso, você pode usar:

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

'ponteiro-eventos: nenhum' mudará o comportamento da sobreposição para que possa ser fisicamente opaco. Claro, isso só funcionará em bons navegadores.

— Chris
fonte

safari 4, chrome e firefox3.6 ainda clica ??

— Timo Huovinen

1

Não é isso que você quer?

— Codebeef

Estou tentando colocar o vídeo incorporado do youtube atrás de um fundo opaco para fins completamente estéticos :)

— Timo Huovinen