29.08.2009

Como posicionar uma DIV em cima de um Flash

Quem nunca teve problema na hora de botar uma <div> com posição absoluta (position:absolute) em cima de um Flash?!

Isso ocorre muito na maioria dos sites que navego hoje em dia.

Para resolver esse problema basta adicionar o atributo wmode=”transparent” dentro da tag <embed> do Flash. Exemplo:

<object width="560" height="340">
<param name="movie" value="http://www.youtube.com/v/Umj1lvgoI68&hl=pt-br&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/Umj1lvgoI68&hl=pt-br&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="560" height="340" wmode="transparent"></embed>
</object>

Fácil não?

Fiz um DEMO com vídeos do Youtube mostrando o problema e a solução, é só visualizar o código-fonte:
Demo

CSS, DEMO, Flash, HTML, Resolvendo problemas

4 Comentários em “Como posicionar uma DIV em cima de um Flash”

  1. Luana diz:
    18 de Setembro de 2009 às 10:00

    Olá, tenho uma dúvida, tem como você me ajudar? Fiz uma borda arredondada para colocar por cima de um vídeo em flash, igual seu exemplo do youtube, no entanto é um png transparente que quero colocar por cima do vídeo. Só que não funciona o link para play, você sabe se existe uma maneira de posicionar uma div “transparente” por cima do vídeo sem afetar os botões?

    Para você ter uma idéia é esse vídeo neste link: http://www.ficafilipe.com.br/novo

    Fico aguardando sua ajuda!
    Obrigada.

  2. Ruan Mér diz:
    19 de Setembro de 2009 às 3:03

    Luana,

    Não é possível colocar um PNG pegando toda a área em cima de um vídeo, pois o vídeo para de funcionar…

    O que você pode fazer é:
    - Botar o PNG com a bordar átras do vídeo (veja o ex: http://img183.imageshack.us/img183/431/exemplo1.jpg). Mas assim, não fica da forma que você quer.

    - Você pode também fatiar esse PNG em 2 imagens, fazendo uma ficar em cima do vídeo e outra atrás (veja o ex: http://img15.imageshack.us/img15/4194/exemplo2.jpg). A imagem com o destaque vermelho seria a que ficaria em cima do vídeo, a outra seria a imagem atrás do vídeo.

    Acho que essa segunda opção seria a melhor para resolver esse problema. Se ainda tiver alguma dúvida é só dizer.

    Se alguém encontrar alguma outra solução que fique melhor, é só dizer =)

  3. jonatas delforge diz:
    31 de Março de 2010 às 15:53

    Parabéns…
    funcionol perfeitamente!
    vlw

  4. Vinicius diz:
    7 de Maio de 2010 às 12:29

    Nossa eu achei que isso era impossivel! Hehehehe Maravilhaaaaaa Muito obrigado.