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
- 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
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, ignoreVocê 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
- Escolha um tamanho clicando nos quadros com medidas
- Clique na área de código e copie, se precisar selecione antes. Pode pressionar as duas teclas juntas Ctrl C para copiar
- Você poderá adicionar o código em seu blog/site...
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- Escolha Editar Html
- Cole o código do vídeo, para colar pode usar as duas teclas Ctrl V
- 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
- 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
- Você pode mudar para a opção Escrever
- 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
- Adicione seus marcadores
- 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 HabitatApesar de ser comédia mostra a cara de pau na política do Brasil.
Como mostrei acima, ao copiar o Código do youtube,
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
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)
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.
- 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


Postar um comentário