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

17 respostas a "Como posicionar uma DIV em cima de um Flash"

  1. Luana disse:

    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 disse:

    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 disse:

    Parabéns…
    funcionol perfeitamente!
    vlw

  4. Vinicius disse:

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

  5. Será que só eu que não consegui?
    Tenho uma DIV que quero usar como menu flutuante. Logo abaixo tenho o SWF. Usando a rolagem, o menu deveria passar por cima de tudo, mas o SWF acaba passando sobre a DIV.

    A DIV tem cor, imagem em background e z-index:1. O SWF já tem os parâmetros de transparência.

    Por que ainda não funciona?
    Já fiz teste com outros tipos de position na DIV e não dá certo também.

    • Paulo Eduardo disse:

      Luiz, faça o seguinte. Coloque na classe css do menu z-index com um valor alto (ex. 1000) e crie uma div para o swf com z-index com valor baixo (ex. -1000) e position: relative. Funciona corretamente em todos os navegadores. Exceto Google Chrome.

  6. Hugo disse:

    Não estava funcionando comigo, até que reparei que minha div do flash estava dentro de uma div pai, e a div que eu gostaria que sobreposse, estava fora dessa div pai, não crie duas divs desnecessárias, senão não funciona, exemplo:

    Errado:

    /*conteudo do flash*/

    Correto:

    /*conteudo do flash*/

    • Hugo disse:

      Não foi

      mas vou tentar mudar um pouco mudando os símbolos de ” por ‘{‘ e ‘}’;

      Errado:

      {div id=’flash’}
      {div id=’flashContent’}
      /*conteudo do flash*/
      {/div}
      {/div}

      Correto:

      {div id=’flash’}
      /*conteudo do flash*/
      {/div}

  7. Ajudou pra Caramba.
    Cheguei até a criar um alert e adaptar utlizando o jquery para imprimir uma imagem.
    Me ferrei pra caramba. E não ficou bom.
    Com essa dica resolveu Tudo.
    Obrigado!!

  8. Valew cara!!

    Você é móoooo legal!

  9. Sandro disse:

    Como faz funcionar no Google Chrome?

  10. Lucas disse:

    Valew amigo, parabéns me salvou de um problemão aqui no trampo!

  11. Douglas disse:

    Ótima dica!

  12. Pessoal, ainda não consegui colocar a imagem atrás do vídeo, até fiz um exemplo para vocês verem.
    Seria para postagem em Blogger, quero colocar uma TV de fundo e posicionar o vídeo em cima dela como eu fiz nessa imagem.
    Se possível puderem postar o código para mim, aqui ou até mesmo enviar no facebook.
    Ficarei muito grato !
    Exemplo Imagem
    Meu Facebook
    Meu Blogger

  13. Hérrisson Elias da Silva disse:

    Ola, tenho um link dentro de uma div com “position:absolute”, e ele nao quer funcionar.
    Pode me ajudar:

    CSS
    #lateral {
    position: absolute;
    top: 1600px;
    left: 964px;
    background-color: #e0aa32; /* amarelo legal */
    height: 1000px;
    width: 130px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid black;
    color: black;
    font-size: 22px;
    }

    HTML

    LEIA NOSSOS ARTIGOS



Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *