Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Donando

[Resolvido] Abrir um video do vimeo.com em cima de uma imagem.

Por , em Desenvolvimento frontend

Recommended Posts

Donando    1

Donando
Postado

Bom dia amigos,

alguem pode me orientar como fazer para carregar um video do vimeo.com, usando o embed, por cima de uma imagem.

Ou seja, gostaria que o video do vimeo abrisse centralizado na janela e por cima de uma imagem. Isso é possível?

Que passos devo seguir?

 

Obrigado

 

o embed que o vimeo fornece é conforme abaixo:

<iframe src="http://player.vimeo.com/video/18439821?color=ff9933" width="400" height="225" frameborder="0"></iframe><p><a href="

from <a href="http://vimeo.com/charlex">Charlex</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

 

resolvido. usei o position.

 

p1
{
position:absolute;
left:0px;
top:0px;
width: 1280px;
}
p2
{
position:absolute;
left:360px;
top:247px;
width: 580px;

}
</style>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

p1 e p2 não são elementos válidos.

 

Defina um atributo class ou id para o iframe e selecione-o via CSS pela .classe ou #id

 

<p class="exemploDeClasse"></p>
<p id="exemploDeId"></p>

 

.exemploDeClasse {}
#exemploDeId {}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Donando    1

Donando
Postado

Fala Evandro,

o que quiz dizer com não são elementos válidos? (desculpe a falta de conhecimento)

 

funcionou perfeitamente com o position....

 

abs

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

http://maujor.com/tutorial/seletores_css21_parte1.php

 

<p>Parágrafo</p>
<div>Div</div>
<span>Span</span>

<p class="fonte-vermelho">Parágrafo com fonte em vermelho</p>
<div class="bordas-azuis">Div com bordas azuis</div>
<span class="fundo-verde">span com fundo verde</span>

<p id="negrito">Parágrafo com fonte em negrito</p>
<div id="italico">Div com fonte em itálico</div>
<span id="negritoItalico">Span com fonte em negrito e Itálico</span>

 

seletorDeElemento {}

p {}

div {}

span {}

.seletorDeClasse {}

.fonte-vermelho { color: #f00; }

.bordas-azuis { border: 1px solid #00f; }

.fundo-verde { background: #0f0; }

#seletorDeId {}

#negrito { font-weight: bold; }

#italico { font-style: italic; }

#negritoItalico { font-wheight: bold; font-style: italic; }

 

w3schools.com/css

Compartilhar este post

Link para o post
Compartilhar em outros sites

Donando    1

Donando
Postado

Evandro obrigado pela atenção. Mas infelizmente estudei por algumas horas e não cheguei a nehuma solução.

Com o position funcionou certinho tanto no firefox quanto no chrome porém no Iexplore não.

 

Alguem sabe me dizer como fazer para funcionar no IE ?

 

obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Donando    1

Donando
Postado

Muito bom o w3schools.

Consegui fazer o que o evandro falou e funcionou no chrome, firefox, opera, e no IE.

Mas não está funcionando no netscape e nem no safari.

Testei o z-index mas não resolveu. pelo que percebi os browsers safari e netscape não estão aceitando os códigos do class.

abaixo o codigo de como está ficando:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>flash+vimeo</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<style type="text/css">
.flash
{
position:absolute;
left:0px;
top:0px;
width: 1280px;
z-index: -1;
}
.vimeo
{
position:absolute;
left:360px;
top:247px;
width: 580px;

}
</style>
</head>


<body>
<body bgcolor="#ffffff">

<flash><p class="flash">
 <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1280','height','800','src','teste','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','teste' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1280" height="800">
   <param name="movie" value="teste.swf">
   <param name="quality" value="high">
   <embed src="teste.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1280" height="800"></embed>
 </object></noscript>
</p></flash>

<vimeo>
<p class="vimeo"><iframe src="http://player.vimeo.com/video/18842873" width="580" height="326" frameborder="0"></iframe><a href="http://vimeo.com/18842873"></p>
</vimeo>
</body>
</html>

 

Se alguem souber como resolvo ficarei muito grato.

p.s. se alguem perceber algum erro nos codigos favor apontá-los.

 

Obrigado.

 

...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado 

<head>
	<title>flash+vimeo</title>
	<style type="text/css">
		#quadradovermelho {
			background: #f00;
			height: 50px;
			left: 10px;
			position: absolute;
			top: 10px;
			width: 50px;
			z-index: 1;
		}
	</style>
</head>


<body>
	<iframe src="http://player.vimeo.com/video/18842873" width="580" height="326" frameborder="0" class="vimeo">
		<a href="http://vimeo.com/18842873"></a>
	</iframe>
	<div id="quadradovermelho"></div>
</body>

 

Testado eficientemente em:

 

Opera 11

Chrome 9

Firefox 4b10

IE 6 e 9

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito