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
Ruan Mér
Trabalho na área de desenvolvimento web a mais de 5 anos, especificamente com diagramação de interface web (front-end), usando as tecnologias xHTML, CSS, javascript com a biblioteca jQuery e a criação de sites com WordPress. Ver portfólio >>
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.
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 =)
Parabéns…
funcionol perfeitamente!
vlw
Nossa eu achei que isso era impossivel! Hehehehe Maravilhaaaaaa Muito obrigado.
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.
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.
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*/
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}
Hugo,
na DIV que vc quer posicionar você ta usando position:absolute, top/bottom, left/right e z-index??
Abs
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!!
Valew cara!!
Você é móoooo legal!
Ótima dica =)
Como faz funcionar no Google Chrome?
Valew amigo, parabéns me salvou de um problemão aqui no trampo!
Ótima dica!
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
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