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...
   
Clique para aumentar

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í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ídeo

   • 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
Clique para aumentar

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="http://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="http://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="http://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.

• Barra de rolagem no post e lateral do blogger
• Estilo das postagens do BlogSpot com Css
• Mudar cores e fundo do título do post do BlogSpot
• Vídeo do Jô sobre Ficha Limpa, contra argumentos toscos
• Baixar grátis Firefox e Google Chrome
• Acelerador de download grátis
• Mudar a aparência de comentário do autor no Blogger