Como colocar o vídeo mais recente do seu canal dentro de um notebook ou televisão

em 25 de janeiro de 2017

vídeo mais recente de seu canal dentro de uma imagem de fundo

Você tem canal no Youtube?
Eu tenho, mas não é bem um canal, é mais um instrumento de apoio e suporte aos tutoriais do blog.
Não sabia?
Olha:



Aproveita que estamos falando nisso e se inscreva! Use o método cococu para ajudar essa blogueira que vos fala :)
*Método cococu:
co= comenta
co= compartilha
cu= curte

Jabá feito, vamos ao tutorial?
O resultado vai colocar o seu vídeo mais recente dentro de um background. Pode ser um notebook, um computador, uma televisão...
Veja o exemplo:



Você, com base nesse código, pode usar qualquer imagem que desejar.
Veja as opções que personalizei:


Ver os exemplos e copiar os códigos


Fica bonitinho e charmoso, né?
Pode ser usado na sidebar do blog ou nos posts.
Vamos aprender?

Você pode escolher a imagem de fundo que desejar, mas sugiro que, para começar, use uma das imagens que disponibilizei. Até você pegar as manhas do paranauê, depois pode trocar a imagem que está no código pela imagem que desejar.

Vamos usar essa, de exemplo:



Vá até a página com o código e copie-o.
A seguir vá ao seu blog e clique na aba Layout.
Clique em Adicionar um gadget e dentre as opções que aparecerem escolha HTML/JAVASCRIPT.
Dentro da caixinha que abrir cole o código copiado anteriormente.

Agora preste atenção!
No código você verá essa parte:
https://www.youtube.com/embed/iroiR3tMLY4
O trecho que marquei em vermelho se refere ao ID do meu vídeo.
Todo vídeo do Youtube possui um ID único.
Vá ao seu canal e clique para ver seu vídeo mais recente, ou o vídeo que deseja colocar em seu blog agora.
Observe que na barra de endereço do navegador aparece o endereço do vídeo. Olhe o final dele. É uma sequência alfa-numérica, não é? Copie essa sequência e a coloque no lugar do trecho que marquei em vermelho no código.
Salve.
Está pronto.

Sempre que quiser trocar o vídeo basta trocar o endereço dele, que é essa sequência alfa-numérica única, o ID do vídeo.
Não é legal?

Dica extra:
Caso queira usar uma imagem de sua escolha fique atento aos seguintes comandos:


CÓDIGO ORIGINAL:

<center>
<div style="background: url(https://2.bp.blogspot.com/-h5TKzkJ9UHs/WHp9gsFd_gI/AAAAAAABUAI/1EJhS9GgjpMrF2VUmoNQZL2S54sbUYN5wCLcB/s1600/televis%25C3%25A3o%2Bvintage.png) left no-repeat; height: 325px; width: 300px;">
<div style="float: left; padding-left: 15px; padding-top: 130px;">
<iframe allowfullscreen="" frameborder="0" height="168" src="//www.youtube.com/embed/iroiR3tMLY4" width="212"></iframe></div>
</div>
</center>

PERSONALIZANDO O CÓDIGO ORIGINAL:

Onde marquei em roxo é o endereço da imagem, substitua pelo endereço da que desejar usar.
Onde marquei em azul é a largura da imagem.
Onde marquei em verde é a altura da imagem.
Onde está marcado em pink é a largura do vídeo; ajuste para caber em sua imagem.
Onde marquei em marrom é a altura do vídeo.
Os valores expressos em padding-top se referem à distância do vídeo em relação ao topo da imagem; altere para ajustar.
Os valores expressos em padding-left se referem à posição do vídeo em relação à esquerda da imagem; altere para ajustar.



Não é nada complicado, mas se não quiser ter trabalho nenhum use um dos códigos já personalizados e ajustados que desenvolvi.
E não deixe de ajudar essa humilde blogueira com o método cococu...
co= comenta
co= compartilha
cu= curte

Enjoy!!!



Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

7 comentários , comente também!

  1. Queria que você fizesse um post ensinando a fazer esse contador de dias ,´postagens e etc que tem aqui no seu blog .
    www.cacheandocommirellydarlen.com

    ResponderExcluir
  2. Oi Elaine,
    Acabei de fazer, ficou lindoooooo!
    Beijocas!
    Ana
    www.viagensebeleza.com

    ResponderExcluir
  3. Boa tarde Elaine, aproveitei que entrei na tua casinha e dei uma passeada pelos post, lembrei que esqueci de comentar que testei este tutorial em minha casinha azul e amei. Claro fiquei com os cabelos mais branquinho :-) tentando "enfiar o vídeo na telinha azul que arrumei no photoshop :-) deu certo "acho" kkkkkkk... Grande abraço e passando pelo meu Simplesmente Lindalva dê uma olhadinha nos créditos :-)

    ResponderExcluir
  4. minha linda me ajuda o video n ficou certo :(

    ResponderExcluir
    Respostas
    1. Bruna, é preciso ajustar os valores em padding e margin até o vídeo encaixar na imagem que você deseja usar.
      Qual está usando?

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…

Para receber os posts diariamente:

Digite seu email e receba nossas
atualizações gratuitamente



Para receber a newsletter semanal fofa e especial:

Assine minha newsletter linda!

* indicates required