Problema no iframe do wmode do YouTube

134

Usando javascript com jQuery, estou adicionando um iframe com uma URL do youtube para exibir um vídeo em um site. No entanto, o código de incorporação carregado no iframe do youtube não possui wmode = "Opaque", portanto, as caixas modais na página são mostradas abaixo do vídeo do youtube.

Alguma idéia de como resolver o problema?

snakeyyy
fonte
Isso ainda é um problema? Eu usei essa solução antes, mas não consigo reproduzir o problema original no Chrome / Firefox / IE mais recente.
marcovtwout

Respostas:

238

Tente adicionar ?wmode=opaqueao URL ou &wmode=opaquese já houver um parâmetro.

Se não funcionar, tente fazer isso, &wmode=transparentque também funcionará no navegador IE.

Shabith
fonte
1
legais! funciona no firefox e chrome, mas por algum motivo não funciona no IE ... alguma idéia?
Danfromisrael #
31
tente usar & amp; wmode = transparente vez
Shabith
29
A configuração "& wmode = xxxx" pressupõe que você já está passando parâmetros no URL. Eu não estava no meu caso, então, em vez disso, preciso adicionar "? Wmode = xxxx" ao URL.
Matt Huggins
6
Diferenças entre opaqueetransparent . opaqueé suposto ter mais desempenho.
donut
3
Shabith - "wmode = opaco" deve ser "wmode = opaco" (em minúsculas 'o')
John
81

Tente adicionar ?wmode=transparentao final do URL. Trabalhou para mim.

Casper
fonte
'Transparente' deve ser a opção preferida na minha opinião.
Foxinni
18

Se você estiver usando a nova API assíncrona, precisará adicionar o parâmetro da seguinte maneira:

<!-- YOUTUBE -->
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
var initialVideo = 'ApkM4t9L5jE'; // YOUR YOUTUBE VIDEO ID
function onYouTubePlayerAPIReady() {
    console.log("onYouTubePlayerAPIReady" + initialVideo);
    player = new YT.Player('player', {
      height: '381',
      width: '681',
      wmode: 'transparent', // SECRET SAUCE HERE
      videoId: initialVideo,      
       playerVars: { 'autoplay': 1, 'rel': 0, 'wmode':'transparent' },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

Isso se baseia na documentação e no exemplo do Google aqui: http://code.google.com/apis/youtube/iframe_api_reference.html

Esturjão de plástico
fonte
7
Observe que isso TAMBÉM precisa de wmode em playerVars. Quando estiver no YT.Player, ele funcionará apenas para o player HTML5. A adição de wmode ao playerVars também envia esse parâmetro para o objeto Flash, que tem seu próprio problema de ordem z. Veja aqui: groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/… Editarei sua resposta de acordo.
Dylan McCall
1
Eu tentei isso e não funcionou. Também não encontrei nenhuma referência ao wmode na documentação do YouTude.
sboisse
O link mudou desde que eu postei pela primeira vez, assim como o método para definir o wmode. Você pode definir qualquer parâmetro do flash agora ou o parâmetro do player do youtube através do playerVars. Eu atualizei o exemplo acima.
Plastic Sturgeon
Carregar uma API inteira apenas para alterar um valor que pode ser facilmente alterado no URL é um exagero total. Não use isso.
Fregante
Alguns de nós trabalham com o player chromeless e já usam a API JS para controlar a interface do usuário. Para nós, essa solução é demais! Obrigado
maxijb
8

A adição ?wmode=opaqueao URL parece resolver esse problema para mim, embora ainda não o tenha testado no IE.

Para aqueles com problemas com a solução proposta anteriormente, observe que um e comercial inicial só funcionará se você já estiver fornecendo outros argumentos para o URL. O primeiro argumento deve ter um ponto de interrogação inicial:http://www.example.com?first=foo&second=bar

Markus Amalthea Magnuson
fonte
Inicialmente, eu estava recebendo um retângulo preto, independentemente do vídeo que estava tentando mostrar .. descobriu que a máquina de teste não tinha o flash instalado e o diálogo para a instalação do flash foi deslocado demais!
Zeb
3

Adicione &amp;wmode=transparentao URL e pronto, testado.

Eu uso essa técnica no meu próprio plugin wordpress shortcode do YouTube

Verifique o código fonte se encontrar algum problema.

Túbal Martín
fonte
Adicionando & amp; wmode = transparent após o URL do you tube Você resolveu o problema em todos os navegadores. Obrigado pelo Sr. Tubal, Bom trabalho :) #
1

Apenas uma dica! - certifique-se de aumentar o z-index no elemento que deseja exibir sobre o vídeo incorporado. Eu adicionei a string de consulta wmode, e ela ainda não funcionou ... até eu aumentar o índice z do outro elemento. :)

Tyson Phalp
fonte
0

&wmode=opaquenão funcionou para mim (chrome 10), mas &amp;wmode=transparentresolveu o problema imediatamente.

imjared
fonte
0

Sei que essa é uma pergunta antiga, mas ainda aparece nas principais pesquisas para esse problema, por isso estou adicionando uma nova resposta para ajudar quem procura uma para o IE:

Adicionar &wmode=opaqueno final da URL NÃO funciona no IE 10 ...

No entanto, adicionar ?wmode=opaquefaz o truque!


Encontre esta solução aqui: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

Amber June
fonte
&e ?estão corretas, dependendo da ordem em que são usadas e de quais outras configurações estão incluídas no URL. Obviamente, ?é usado se esta for a primeira (ou única) configuração, &caso contrário.
Alex
Sim, mas o IE tem necessidades especiais. Apenas tente e veja o que funciona no IE 10 e o que não funciona. Ainda não tentei isso no IE 11.
Amber Junho
0

recentemente vi que, às vezes, o flash player não reconhece &wmode=opaque, mas você deve passar &WMode=opaquetambém (observe as letras maiúsculas).

Nereo Costacurta
fonte