Personalizar e colocar vídeo do Youtube no blog

Mostrarei como adicionar vídeos no blogger, dicas de cores e tamanhos para o vídeo se ajustar a larguras diferentes e como pegar o código do vídeo no youtube.

Copiar o código do vídeo no Youtube

    A maneira mais fácil de adicionar um vídeo em blog/site é colocar o código que incorpora o vídeo no blog ou página da web
  1. Geralmente no Youtube, Abaixo do vídeo clique no botão Compartilhar, aí aparecerá outras opções e tem o botão <Incorporar>, Clique nele
  2. Se quiser, escolha de cores para a barra do vídeo(barra serão os controles abaixo do vídeo), e pode adicionar uma borda de cor quase igual a cor da barra, basta marcar a opção Mostrar contorno(borda) Essa opção não tem mais, ignore

    Você poderá alterar cores se marcar a opção Usar código de incorporação antigo, mas ainda terá que adicionar um trecho de código e fazer alterações manualmente, detalhes abaixo

  3. Escolha um tamanho clicando nos quadros com medidas
  4. Clique na área de código e copie, se precisar selecione antes. Pode pressionar as duas teclas juntas Ctrl C para copiar
  5. Você poderá adicionar o código em seu blog/site...
  6. Clique para aumentar
    Copiar código do vídeo do youtube

Adicionar Vídeo do youtube na lateral/sidebar blogger

Para adicionar o vídeo na lateral do blogger você pode pegar o código do youtube como mostrado acima, ou adicionar na postagem e copiar o código da mesma, o próximo passo seria adicionar um gadget Html/Javascript e colocar o código do vídeo dentro.

Adicionar Vídeo do youtube na postagem do blogger

Já no seu blog em Nova Postagem ou Editar Postagens
  1. Escolha Editar Html
  2. Cole o código do vídeo, para colar pode usar as duas teclas Ctrl V
  3. Escreva seu texto acima ou abaixo do código(nunca no meio dele) algumas frases interessantes relacionadas ao vídeo, isso é com você, opinar, detalhes, prefira escrever algo original, inédito, e de preferência algo que as pessoas não acreditem ter perdido tempo em ler, só o vídeo não traz novos visitantes para seu blog, principalmente vindo dos sites de busca, já um texto exclusivo pode fazê-lo, pois, se tratando de vídeo, os sites de busca vão colocar o youtube e outros sites de mídia em primeiro lugar, a menos que seu blog tenha um bom texto com as palavras preferencialmente relacionadas ao vídeo
  4. Se você tem um vídeo em seu computador, pode adicionar ao post do blogger clicando no link Adicionar VídeoAdicionar vídeo

    Para quem usa o novo editor talvez não tem essa opção, você pode tentar usar o Draft.blogger.com para postar e o botão Inserir VídeoInserir video

    • Abrirá uma janela e clique no botão Enviar arquivo...
    • Abrirá uma janela para escolher o arquivo de vídeo, escolha e clique em Abrir, Ok ou Confirmar
    • Voltando a janela do blogger, talvez você precisará marcar a opção Concordo com os Termos e Condições de Upload

      É bom ler e ver se está de acordo, provavelmente é um pedido e alerta para não infringir leis de direitos autorais e de que o serviço se isenta de responsabilidades, então, mantenha uma cópia de seu vídeo guardada...

    • Clique em Upload ou FAZER UPLOAD DO VÍDEO

  5. Você pode mudar para a opção Escrever
  6. Adicione o título relacionado ao assunto do post ou ao vídeo, mas, se for usar o mesmo título do vídeo que está no youtube, pense se tem uma forma mais interessante ou original para o título
  7. Adicione seus marcadores
  8. Clique em PUBLICAR POSTAGEM
Exemplo de Vídeo, CQC à caça de Ficha Suja
Esse Vídeo mostra Danilo Gentile e Monica lozzi "caçando" os fichas sujas em seu Habitat
Apesar de ser comédia mostra a cara de pau na política do Brasil.

Como mostrei acima, ao copiar o Código do youtube, tem as opções de cor para barra e controles de vídeo e bordas. Nesse vídeo abaixo escolhi a barra vermelha e sem borda.

Cores de borda e barra de controles do vídeo

Alteração de cores usando o código é para usuário Avançado, ou dedicado e sem medo de errar, sempre que possível, faça cópias daquilo que for alterar, códigos...
Na opção de pegar o vídeo do Youtube, a opção de cores de contorno foi retirada, mas, se você optar pelo código antigo, você pode acrescentar cores ao contorno, basta adicionar esse trecho de código após o endereço do vídeo:

&fs=1&color1=0x3d85c6&color2=0xfebd01&border=1


Atenção que é para quem optar pelo código antigo de incorporação, e, no código antigo tem dois endereços Url do vídeo, altere os dois, e com cuidado, a Url acaba antes de um fecha-aspas " então é antes dela. Os códigos de cores são iguais os códigos Hexadecimais para Html, porém, nesse caso não se usa o #

Nesse vídeo abaixo escolhi a barra cor de laranja/amarelo e borda azul, a parte verde é o encontro ou mistura das duas cores ;)

Com um pouco de esforço e criatividade é possível personalizar o contorno do vídeo do youtube, para tornar mais atrativo ou combinar com o estilo de seu blog.

As cores usadas nesse vídeo estão além das cores disponíveis no Youtube
As cores de borda e barra dos vídeos do youtube são padronizadas, mas, com muito cuidado e atenção é possível mudar elas diretamente no código.

Para quem não sabem, para cores em códigos Html ou herdados dele, geralmente pode ser usado um código hexadecimal(6 caracteres) correspondente a cor, aqui sem uso de #. Você pode pegar o código de vídeo com as opções de cor e contorno marcadas e alterar a cor no código, Veja um exemplo do código do vídeo e as cores alteradas:


<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/LLSH62-eO8M&hl=pt_BR&fs=1&color1=0x3d85c6&color2=0xfebd01&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/LLSH62-eO8M&hl=pt_BR&fs=1&color1=0x3d85c6&color2=0xfebd01&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>


Código hexa de cor Azul 3d85c6
Código hexa de cor Amarelo febd01

Códigos de cores hexadecimais aqui

Mudar o tamanho dos vídeos do youtube com Css simples

Vídeo em lugar com largura menor


Coloquei os vídeos em uma DIV(quadro) com largura menor para simular uma lateral ou local mais estreito de uma página.

O tamanho mínimo nos códigos de vídeo do youtube hoje tem 450 pixeis de largura fazendo com que ele fique cortado caso coloque em local menor, mas, é possível fazer com que o vídeo fique auto-ajustável a qualquer largura onde for colocado, substituindo as tags de largura e altura que estão em Html por outras em Css e em porcentagem no lugar de pixel(medida concreta)

Nesse ultimo vídeo eu retirei a tag de altura e deixei sem ela, para que vejam como fica, no Firefox ficou bem, mas em outros navegadores... Quem tem um blog ou site deve estar preparado e ver suas páginas nos navegadores IE, Chrome e Mozilla, que são os mais usados.


Você pode alterar o código referente a largura e até altura, veja como é o código e o que irei alterar a código html de largura concreta para um código style Css de largura baseada em porcentagem.

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/eFdSF7DW2T8&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/eFdSF7DW2T8&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Agora veja atentamente como ficaria um código com largura alterada:


<object style="width:98%;" height="275"><param name="movie" value="http://www.youtube.com/v/Wxh75vKppBo&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/Wxh75vKppBo&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" style="width:98%;" height="275"></embed></object>

O vídeo terá 98% da largura do local onde você colocar ele, se for um local estreito ele ficará estreito(como na lateral do blogspot), porém, também diminui um pouco a altura, essa não pode ser em porcentagem, deve continuar um valor concreto, e, você pode fazer o mesmo no código de um vídeo, pode diminuir mais o valor da altura, se preciso for.

Muito cuidado com os códigos, uma vírgula ou outro caracter faltando ou a mais pode dar erro, até um espaço faltando ou em local inapropriado.

Finalizando, nos exemplos acima substitui os códigos html de largura concreta→ width="425" pelo código style Css de largura Css em porcentagem→ style="width:98%;" e lembrando que os 98% não é o tamanho real do vídeo, mas sim, correspondente a largura da lateral do blog ou outro local que queira colocar ele. Usei uma largura de 98% para dar uma folga para possíveis bordas, margens, etc.

20 comentários:

Personalizar e colocar vídeo do Youtube no blog2010-05-21T00:03:00-03:00
  1. Olá.
    Venho por meio deste convidar-te a participar do 'Top Blog da Semana' do site 'TOP BLOG ws'.
    PRÊMIO:Espaço de publicidade em um blog de qualidade. Cadastre seu blog e concorra.
    http://videosincriveis.ws/topblog

    Um grande abraço!

    Responder
  2. Anônimo15/7/10

    OIE EU SOU NOVA AQUI , ESTOU GOSTANDO MUITO , DE TUDO AQUI NESSE SITE , TUDO MUITO FACIL , MUITO OBRIGADO ... !
    QUERO TE CONVIDAR PARA PARTICIPAR DO MEU BLOG ... www.servadoonipotente.blogspot.com

    DEUS TE ABENÇÕE !!

    Responder
  3. adorei obrigada...

    Coloquei no meu blog um video...
    http://burrochora.blogspot.com/

    Responder
  4. Como faço p mudar esse video...?? quero colokar outros videos.
    Como que faz ???

    Responder
  5. Leofirma

    Você deve mudar o código, cada vídeo tem seu próprio código, você assiste o vídeo e copia o código, como mostrei acima.

    Responder
  6. OI, mais uma vez por aqui.
    Passei o dia todo tentando colocar o meu canal do youtube numa pagina estática do munu, mas não deu certo. Consegui criar a pagina "VIDEO" mas quando clica-se ela é direcionada para dentro do próprio blog como se fosse uma postagem. O que eu quero é que o usuário possa ser direcionado para o youtube.
    Pode me ajudar por favor.
    So pra registrar mais uma vez,suas dicas estão salvando o meu blog.
    Abç.Obg

    Responder
  7. Kátia Fernandes

    Me parece que você quer criar um link no seu menu e está errando ao colocar o endereço(Url) da página que o visitante será direcionado ao clicar no link.

    Como se trata do blogger, tem duas maneiras de criar links na área de gadget(fora do post, na volta dele), preste atenção, uma maneira é em Html, essa geralmente você verá uma 'caixa' grande para inserir os códigos, como essa na área dos comentários.

    A outra maneira é um gadget específico para isso, nesse tipo de gadget você terá apenas pequenos campos para colocar dados que não sejam códigos Html(apenas nome e Url), esse gadget do qual me refiro(clique aqui e veja exemplo), se for, leia com atenção e veja como criar a lista de links sem errar a Url e sem uso de códigos.

    Responder
  8. Boa Tarde! Primeiramente obrigada por responder. Você é muito prestativo mesmo. Em segundo vou abusar da sua paciência com a minha santa ignorância. O que você ensinou acima eu já havia testado mas não é bem o que quero. Vou tentar explicar novamente:Coloquei o gadget criar paginas, uma delas é home, outra contato(estática),Sobre,e uma é VÍDEO, nessa de vídeo não gostaria de postar nada apenas queria que o visitante ao clicar em vídeo já fosse direcionado direto para o youtube onde tenho um canal. Como faço isso? Coloco o código em Html em "modelo"? Obg. Ah, como faço para colocar seu banner q está no fim da página?

    Responder
  9. Kátia Fernandes

    Quanto ao banner, aquilo que está na 'caixa' é código Html, para colocar códigos na lateral do blogspot, veja aqui(ou parte inferior), ficou um post meio esquisito, mas é algo para aprender clocar códigos de gadgets e evitar alguns erros comuns.

    Tá, quando você criou a primeira página P provavelmente você criou um junto com ela um gadget que pode se chamar Lista de páginas, esse é o seu menu, sendo assim cada vez que você criar uma página(não poatagem) o blogger adiciona um link nesse menu, até aí tudo bem, mas, você pode incluir outros links nesse menu(lista de páginas), para isso acesse o blogger.com >Design >Elementos da página e procure um 'quadro' no topo dos seus elementos, talvez ele terá o nome Lista de páginas, e clique em Editar, aí irá abrir uma janela para você inserir os dados do novo link, será como eu expliquei no comentário acima, coloca a Url completa da página/site que você quer e o nome e clique em Salvar, talvez existam mais opções como excluir ou um botão para adicionar... e se tem algum link que você não quer pode remover.

    Responder
  10. Oi, eu de novo,rs.
    Sei pq não estou conseguindo, mas não sei como fazer. A "lista de páginas" q vc menciona não aparece para ser editada quando abro >Design >Elementos da página, li o artigo página p, e o quadro para ser editado os links não aparece, justamente pq não aprece o gadget lista de páginas e ele foi instalado pq conferi. Tem jeito??? O que faço? Desisto? Me ajude. Obg.

    Responder
  11. Desculpe Kátia Fernandes

    Fui ver e esse gadget chama-se Páginas, isso se você não mudou o nome, mas não tem mais a opção de inserir links nele, sendo assim você não terá uma maneira para fazer isso, tenta fazer uma lista de links do blogger, clique aqui e depois mova ele para o topo, se ficar igual o seu menu, aí você poderá excluir o existente e colocar um novo que te da a opção de adicionar links para onde quiser. Para saber como mover gadgets clique aqui

    Responder
  12. Oi, tentei de todas as formas mas infelizmente não funcionou. Mas quem sabe mais pra frente aparece uma solução. Ah, o template que eu estou usando é o Freshness,ele vem com a página início, as demais(eu e o blog, videos...)eu coloquei adiconando o gadget "páginas".
    Aproveitando, nas incursões dentro do seu blog, fui levada a uma página para fazer o gadget "banner post recentes e slideshow" adorei e coloquei. Vc é fera mesmo.Obg por tudo. Abç.
    Até amanhã.

    Responder
  13. Kátia Fernandes

    Eu vou dar uma olhada nesse modelo e vou ver se tm como inserir mais alguns links nesse menu usando javascript, tenho quase certeza que dará certo mais vai demorar uns três dias.

    Responder
  14. Vlew amigo, aguardarei. Abç.

    Responder
  15. Kátia Fernandes

    Para inserir link nesse menu do blogger eu tinha lhe dito que eu ia tentar com JavaScript, aí não precisaria mexer no HTML, mas a lista de links não tem uma id, sendo assim, no momento só é possível mexendo no HTML, Clique aqui para ver como, com cuidado que é difícil e se puder faz num blog de testes antes.

    Responder
  16. Vou tentar. Quero te perguntar se tem como colocar vídeos na sidebar como o gadget vídeos, só que colocando o endereço do meu canal?
    Obg. Um abraço.

    Responder
  17. Deu certo.
    Cara tu é muito bom mesmo. FERA!!!
    Bjs. Brigaduuuuuuuuuuuuuuuuuuu.........

    Responder
  18. Kátia Fernandes

    Colocar vários vídeos assim usando o nome do canal na lateral do blogger eu não consegui encontrar uma maneira, mas tem um gadget do blogger que faz algo parecido, veja como adicionar:

    Acesse o blogger.com e clique em Design >Elementos da página >Adicionar um gadget e na janela que abrir procure e clique em Barra de vídeo, na nova janela, você pode colocar o título para o gadget e logo abaixo você verá Youtube e 3 opções como mais exibidos, melhor classificação e ... recentes, pode marcar uma, todas ou duas delas e observar quais os vídeos que aparecem, onde diz critérios você coloca o seu nome de usuário do Youtube, e onde tem Palavras chave pode deixar em branco ou colocar palavras para servirem como uma espécie de filtro, depois é só clicar em Salvar.

    Você pode colocar mais de um gadget, se for colocar um abaixo do outro o segundo não precisa de titulo, pois assim talvez pareça um, se for colocar dois gadgets use opções diferentes para cada, assim serão exibidos vídeos diferentes, eu recomendo usar apenas um ou ver se o blog não fica mais lento usando dois desse tipo de gadget.

    Responder
  19. Minha barra de videos está ficando de pé num espaço q deveria estar na horizontal...

    Responder
    ...Respostas
    1. Se você se refere a barra de vídeo do blogger, eu percebi que com os dois navegadores mais usados eles aparecem na horizontal, mesmo numa largura pequena, mas eu não experimentei com o IE7, esse navegador tem um comportamento um pouco diferente com alguns estilos Css bastante usados em páginas da web, cada vez mais o IE7 tem sido menos usado, por isso não sei se vale perder tempo se preocupando com ele, e, se você usa ele, prefira atualizar para uma versão posterior, como o 8, ou, experimente o Mozilla e Chrome.

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!