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 imagemwidth="460: Coloque a altura do vídeocó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
-Tutorial : Trechy Teen
-Background: Blog Noturna
aaah obrigada pelo tuto, há tempos estava querendo saber como fazer isso! parece até q voc sabia aushaushuahs vai ser mto útil :)
ResponderExcluirQue bom, estou feliz por ter ajudado, assim q der posto mais background para vídeo :)
ResponderExcluir