Como colocar background nos vídeos

22 de jun de 2012


Hey lindas e lindos, muita gente pediu pra ensinar como fiz a "bordinha" nos vídeos do ultimo post, na verdade não é uma borda, mas sim uma imagem de fundo. Como fiz um post com bastante vídeos, quis dar uma enfeitada pra deixar mais atrativo, e pelo visto funcionou né? (risos) Confira o resultado:


Ah, antes que eu esqueça! Aprendi esse tutorial no blog Menina de Deus, com a Lua Lopes ~seus créditos gata~ É bem simples de fazer, só requer um pouco de atenção! Primeiro você deverá fazer uma imagem, saiba como:

Fazendo a imagem
1- Vá ao youtube e pegue um vídeo de exemplo (qualquer vídeo, é só pra ver o tamanho)
2- Clique em compartilhar > incorporar e coloque a largura que deseja que os vídeos tenham (coloque uns 40px menor que a área da postagem), então vai aparecer a altura automaticamente. Isso serve pra descobrir a altura correta em relação à largura do vídeo, ou seja, pra ficar proporcional.
3- Agora que você tem a largura e a altura pode usar a criatividade pra criar a imagem! Lembre-se de fazer a imagem maior que o vídeo, para ficar com a "bordinha". 


Código
Copie o código abaixo e cole na aba "Editar HTML" da postagem, fazendo as alterações necessárias:
<div style="background: url(URL DA IMAGEM) left no-repeat; height: 413px; width: 550px;"><div style="float: left; padding-left: 48px; padding-top: 60px;">CÓDIGO DO VÍDEO</div></div>

Entendendo:
- Onde está destacado de rosa, você vai substituir pelo que está sendo pedido.
- Onde está destacado de azul, você vai substituir pelo tamanho da sua imagem (largura: widht / altura: height)
- No que está destacado de roxo, você pode alterar para o vídeo ficar no lugar que você quiser em cima da imagem. Em padding-left você pode alterar o valor para a esquerda, lembrando que existem números positivos (1;) e negativos (-1;). Em padding-top altere para cima.

Você pode usar esse código para qualquer gadget é só colocar o código html desejado (c-box, contador, fanbox...) onde está escrito "código do vídeo".

Fiz duas bases bem simples para vídeo, quando puder trago mais!

470x295px

530x311px


É isso galera, espero que tenham gostado, kissus! :*

50 comentários:

  1. Tava rezando pra você postar esse tuto Anny, é meio complicadinho mas irei usar no meu próximo lay que sai no final de semana :)

    Beijos ♥
    Blog Refugio Teen - Fan page do blog, curte ;)

    ResponderExcluir
  2. Amei o tuto! Suuper útil e fica um resultado bem bonito mesmo.O novo lay ta incrível!!!

    Bjos
    srtaindependencia.blogspot.com.br

    ResponderExcluir
  3. Amei essa postagem , muito útil . ^^

    http://baratadearmario.blogspot.com.br/

    ResponderExcluir
  4. Eu vi no outro post, achei um mimo só!
    Fica lindo assim :)

    bjãoo

    ResponderExcluir
  5. Adorei , a imagem que você colocou como modelo eu enttendi que era vídeo, ksoksoskoksks
    http://you-for-things.blogspot.com.br/

    ResponderExcluir
  6. Ótimo tutu,adorei :-P
    www.cereja-com-morango.blogspot.com

    ResponderExcluir
  7. Nossa que perfeito esse tutorial :D E as bordas são lindas *--*
    Cada vez mais encantada com o GI *w*
    www.cute-bii.blogspot.com

    ResponderExcluir
  8. Amei o tutorial, já tinha visto em algum lugar, mas aqui tá mais simples ^^
    http://themudancas.tk/

    ResponderExcluir
  9. Este comentário foi removido pelo autor.

    ResponderExcluir
  10. Muuuito obrigada, estava doida procurando esse tutorial!
    happy-charllote.tk

    ResponderExcluir
  11. Nossa Anny! Eu não sabia como colocar! Você me ajudou muito. Mas fiquei meio confusa na parte do roxo e azul... Ele são do vídeo ou da imagem? Bem, como sempre, o seu blog está super divo! Continue assim, gata! Seguindo de tão lindo, você pode retribuir? www.divandoblog.blogspot.com.br]

    Bezos,
    Nandaa ^-^

    ResponderExcluir
    Respostas
    1. No azul você coloca as dimensões da imagem e no roxo você vai "posicionar" o vídeo por cima da imagem, pra ele ficar bem em cima da parte branca :D Obrigada linda <3

      Excluir
  12. tava procurando esse tutorial. muito bom!

    http://conectadas2.blogspot.com.br/

    ResponderExcluir
  13. Simplesmente AMEI esse tutorial!
    Super original,nunca vi outro em lugar nenhum!
    Adorei!!!

    Flights and Dreams

    ResponderExcluir
  14. Qual é sua fonte que vc usa pra os titulos linda ? Quando vc cobra pra poder fazer meu blog ?

    ResponderExcluir
  15. Contatos : paraserperfeita.blogspot.com

    ResponderExcluir
  16. Awn, que bom que você postou o tutorial que eu pedi Anny! Eu não sei se eu entendi muito bem e se eu vou conseguir fazer assim tão bonitinho como você fez, mas eu posso até tentar. Fico feliz que você tenha me atendido! Obrigada mesmo. Um beijo.

    the-zombie-attack.blogspot.com

    ResponderExcluir
  17. Eu fiquei procurando esse tutorial por todo canto!O resultado fica mto lindo!Bjos
    http://balaio-sonhos.blogspot.com

    ResponderExcluir
  18. Um pouco trabalhoso, mas o resultado é mt lindo, vale a pena o esforço!! Ameii! ^^ Bjs, Stardolleiras

    ResponderExcluir
  19. Ameis Ajudou Viu ...
    http://smileretro.blogspot.com.br/

    ResponderExcluir
  20. Ai que amor que fica!


    http://sweetshake.blogspot.com.br/

    ResponderExcluir
  21. Pegaram seu tutorial e não colocaram os creditos...

    o link que plagiou foi esse: http://m-a-v-i-e.blogspot.com/
    Meu blog :http://www.toddynhosemcanudo.com/

    ResponderExcluir
  22. Adorei o tutorial :) bem criativo bjos.. adoro seu blog:)

    http://strawberrycupcake-rafa.blogspot.com.br/

    ResponderExcluir
  23. Demais! fica muito fofo!
    Seguindo aqui, viu?
    Bjs -> imnanda.blogspot.com

    ResponderExcluir
  24. Vou fazer agora no meu pois ficou muito fofo http://cinnamoncake-br.blogspot.com.br/p/concursos_24.html

    ResponderExcluir
  25. Flor, como coloca esse menu, como no seu blog? que quando passa o mouse ele muda de cor?
    beijoos

    http://euemeujardimsecreto.blogspot.com.br/

    ResponderExcluir
  26. Bom dia amore,
    vim especialmente te desejar ótima semana
    e pedir sua participação no sorteio novo que está no ar
    kit Ecoplus, igual aquele que usei e amei!
    participe, será uma honra!
    obrigada, bjão♥
    www.coisasdeladdy.com

    "Escolha o trabalho de que gostas e
    não terás de trabalhar um único dia em tua vida"

    ótimo fim de semana!!!
    ♥@barbielieth♥
    http://www.facebook.com/coisasdeladdy

    ResponderExcluir
  27. Awn , ameei o seu blog ( :
    Seguiiindo *---------*
    Se curtir o meu segue também ?
    http://nerd-princesa.blogspot.com.br/
    Obgg '

    ResponderExcluir
  28. Este comentário foi removido pelo autor.

    ResponderExcluir
  29. oi linda, adorei o teu blog, e supeer amei a dica dos background em vídeos. Venha conhecer o meu, se quiser comentar e seguir, irei retribuir com muito carinho. Beijinhos, Deby do blog pitadapink.blogspot.com.br

    ResponderExcluir
  30. O tutorial é muito legal ! Quando eu for mudar o lay do meu blog , aí eu uso esse tuto !
    Mas em fim , o seu layout É MEGA LINDO ! amei de verdade *o*
    Beijos !
    tempo-deprimavera.blogspot.com

    ResponderExcluir
  31. Adorei o tutorial, vou usar muito !

    http://garotamarte.blogspot.com.br/

    ResponderExcluir
  32. Que fofo,nunca tinha visto antes
    Mini surpresinha: http://cupcakeedicoes.blogspot.com.br/2012/06/sobre-afiliados-e-muito-mais.html#more

    ResponderExcluir
  33. Respostas
    1. não fiz mais que minha obrigação linda! :3

      Excluir
  34. Achei bem fofinho mesmo quando vi no outro post :)
    ótimo tuto, espero que o cufón dê certo pra vc
    kissus
    Cherry Bomb || Fanpage

    ResponderExcluir
  35. Você me trollou, linda, kkk'
    Cliquei no vídeo de exemplo!
    Beijinhos!

    ResponderExcluir
    Respostas
    1. Sabia que isso ia acontecer com alguém, por isso coloquei o link do blog por cima KASJHSLADLAKSHDLAKSJD eu ri aqui'

      Excluir
  36. Curti bastante o tuto, não é tão simples mas como você disse, requer apenas um pouco de atenção, e o resultado é ótimo.

    Crying Lightning

    ResponderExcluir
  37. Isso tudo dá pra colocar numa div só que você deverá colocar < center >a div o resultado é realmente lindo, também pode-se colocar uma imagem pequena como background, não propriamente desse tamanho... Ah, também pode usar o bordas arredondadas para dar um quê a mais.

    Bjs!
    Talita Ackles
    Nerd Dream Layouts

    ResponderExcluir
    Respostas
    1. Tem razão, não tinha pensado nisso! Adorei a idéia (:

      Excluir
  38. Annnnyyyyyyy! você é minha salvação flor! >U<
    tava procurando esse tuto ha seculos e nao achava em lugar nenhum :P
    Vou salvar nos favoritos e usar sempre!
    Brigada 1000 vezes!
    Ah, aceita afiliacao ou parceria?
    Beijinhos, Vickie
    ~~>www.chicletevioleta.blogspot.com.br

    ResponderExcluir
  39. AAAA Menina! Você me salvou! A meses que estava procurando esse tutorial. Só que eu só encontrava no blog do TT como o blog da Candy foi hackeado não encontrava em canto nenhum :/ Mas achei aqui hahahaha

    Beijos e muito obrigada
    http://leticiac04.blogspot.com/

    ResponderExcluir
  40. Bah. vlw guria
    fico muitoo lindo.
    é só um pouquinho complicado de acerta as medidas, mas eu consegui \o/ .
    bjoo ^^

    ResponderExcluir
  41. Nossa Adorei...

    Aproveitei muitos tutoriais daqui. Seu blog é lindo. Parabéns.

    Beijos

    ResponderExcluir
  42. Adorei, fica incrível. Dá outra cara pro vídeo. Lindo!

    Beijos.

    http://www.odoceoutono.blogspot.com.br/

    ResponderExcluir
  43. Vou utilizar esse no meu blog!Ah! Eu irei utilizar a 1º base ficou perfeita!Obrigada!
    Quase 4

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.