terça-feira, 20 de dezembro de 2011

Tutorial:Colocar background em um vídeo


Hoje vocês vão aprender a colocar uma imagem como background em um vídeo.Você pode usar o código utilizado neste tutorial para colocar background em outros widgets também como o mural de recados ..etc.Acho que fica bem diferente e atrativo de se ver.Vamos ao tutorial.


Fiz algumas imagem tanto para vocês usarem quando para terem como base para criar a de vocês aqui estão:




height: 348  x width: 480



Personalize o código abaixo e cole na aba editar html do seu widget ou página que o vídeo irá ficar:

<center><div style="background: url( URL DA IMAGEM/ BACKGROUND) left no-repeat; height: 512px; width: 600px;">
<div style="float: left; padding-left: 32px; padding-top: 120px;">
<iframe allowfullscreen="" frameborder="0" height="320" src=" código do vídeo" width="460"></iframe></div>
</div></center>

Onde tem:

URL DA IMAGEM/ BACKGROUND: Coloque o endereço da imagem que ficará como background no vídeo.
height: 512: Coloque a largura da imagem ( altere apenas o valor )
width: 600: Coloque a largura da imagem ( altere apenas o valor )
height="320: Coloque a largura do vídeo acima da imagem
width="460: Coloque a altura do vídeo
código do vídeo: Coloque o endereço do vídeo que tem no código de incorporação.

Para pegar o código do vídeo siga os passos abaixo:



você irá colocar no código apenas  a parte selecionada na imagem acima

É isso gente, vou deixar um código já pronto para quem não souber mexer muitos nos códigos, basta apenas colocar o código do vídeo como ensinei acima:

<center><div style="background: url( http://3.bp.blogspot.com/-ivnrVrLXMIA/TvCU4Sw-P-I/AAAAAAAAB18/bZCLbP10w6M/s1600/imagem-2.png) left no-repeat; height: 348px; width: 480px;">
<div style="float: left; padding-left: 22px; padding-top: 38px;">
<iframe allowfullscreen="" frameborder="0" height="253" src=" código do vídeo" width="438"></iframe></div>
</div>
</center>
Vai ficar assim :



 Créditos :
-Tutorial : Trechy Teen
-Background: Blog Noturna