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.



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( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaBCUEYscSewahEPK7VResKzUs6MJ5fYiI5KQxNcDZd2rul_tlnjAL9M_vWKiGE_nN6wlHmD6TZsCBAkrpzM7UXflv0pG_ed1_kIUw91XPKSsDVehiEmiDhRWEctVnfJHYCPyNvsi34_Y/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>
 Créditos :
-Tutorial : Trechy Teen
-Background: Blog Noturna

2 comentários:

  1. aaah obrigada pelo tuto, há tempos estava querendo saber como fazer isso! parece até q voc sabia aushaushuahs vai ser mto útil :)

    ResponderExcluir
  2. Que bom, estou feliz por ter ajudado, assim q der posto mais background para vídeo :)

    ResponderExcluir