Recentemente tive de implementar uma div flutuante sobre um vídeo do youtube que estava dentro de um .
Tive uma grande surpresa, a imagem abaixo ilustra meu problema.
Como podem ver a minha div ficou abaixo do vídeo do YouTube.
Solução:
Tentei incorportar este Iframe abaixo:
<iframe width="560" height="315" src="http://www.youtube.com/embed/iQpC4KU-35M" frameborder="0" allowfullscreen></iframe>
É muito simples, é só incluir o parâmetro ?wmode=transparent ao final do link do vídeo. Dê uma olhada no exemplo abaixo:
<iframe width="560" height="315" src="http://www.youtube.com/embed/iQpC4KU-35M?wmode=transparent" frameborder="0" allowfullscreen></iframe>
Se você tem outros parâmetros no seu link como por exemplo (?rel=0 que é usado para não recomendar nenhum vídeo ao final do seu vídeo) então você pode utilizar o parametro &wmode=transparent.
<iframe width="560" height="315" src="http://www.youtube.com/embed/iQpC4KU-35M?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
Em alguns blogs diz que o parâmetro ?wmode=transparent deve ser o primeiro, eu não tive nenhum problema.
Bom agora devidamente posicionada minha div esta sobrepondo meu iframe
Grande Abraço
@pmoraesjr