Sobrepor um elemento HTML acima de um iframe incorporado do youtube

Ao incorporar algo como um vídeo do YouTube, você também pode querer posicionar outros elementos em cima dele, com algum tipo de posicionamento absoluto. Simplesmente definir seus Z-indexes não resolverá o problema.

Isso pode ser feito usando a opção wmode = opaque após o URL do link do youtube. Por exemplo:

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

No código acima, após / embed / videoID, adicionei ? Wmode = opaque .

Certifique-se de que é a primeira coisa que você adiciona após o ID do vídeo no url. Então, você pode adicionar suas outras opções com o sinal &, como ? Wmode = opaque & showinfo = 0 & autohide = 1 .

Espero que ajude alguém.

Além disso, aqui está um link para algumas informações oficiais da Adobe documentando o problema: http://helpx.adobe.com/x-productkb/multi/swf-file-ignores-stacking-order.html

Caso de uso: meu caso de uso específico era que eu precisava de controles de paginação para que um controle deslizante aparecesse por cima de um vídeo incorporado. Funcionou como um encanto.