Goiânia, domingo, 8 de agosto de 2010

[Defasado] Como mudar o tamanho e a cor do player do YouTube

YouTube
07/12/2013 - Mesmo defasado, este post continuará no ar para consulta histórica.

Quando desejamos colocar um vídeo em um blog, no orkut, no MySpace ou outro site que permita isso, basta clicar no botão Incorporar <Embed> que o próprio YouTube nos dá algumas opções de personalização de cores e tamanhos.

Incorporar vídeo do YouTube

São nove opções de cores e quatro opções de tamanhos. Você pode colocar um tamanho personalizado, porém ele vai gerar automaticamente a proporção para que o vídeo seja 100% exibido. Observe que o tamanho mínimo é de 200 x 175 pixels.

Vou mostrar neste post como customizar seu player sem depender das alternativas oferecidas pelo site, especialmente para quem ainda não tem intimidade com esse tipo de código HTML.

► Mudando o tamanho do player

Colocar o player do YouTube em um tamanho não proporcional pode ser útil em vários casos, mas uma das principais necessidades dos blogueiros é partilhar apenas o áudio, sem o vídeo propriamente dito.

No código abaixo já estão destacas as partes do código que se referem à largura (width) e à altura (height) do player:

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/sct0-7rs2zY&amp;hl=pt_BR&amp;fs=1?rel=0&amp;color1=0x006699&amp;color2=0x54abd6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/sct0-7rs2zY&amp;hl=pt_BR&amp;fs=1?rel=0&amp;color1=0x006699&amp;color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Para personalizar, basta mudar esses números para mais ou para menos. Esses valores são em pixels. As regras são:

  • O número que você colocar no width de cima tem que colocar no width de baixo.
  • O número que você colocar no height de cima tem que colocar no height de baixo.

Para colocar o player sem exibir o vídeo, o “segredo” é colocar exatamente 25 pixels na altura (height):

<object width="480" height="25"><param name="movie" value="http://www.youtube.com/v/sct0-7rs2zY&amp;hl=pt_BR&amp;fs=1?rel=0&amp;color1=0x99cc00&amp;color2=0x99cc00"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/sct0-7rs2zY&amp;hl=pt_BR&amp;fs=1?rel=0&amp;color1=0x99cc00&amp;color2=0x99cc00" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="25"></embed></object>

Como fica:


Acabou-se o “segredo”.

► Mudando a cor do player

No código abaixo as partes destacadas se referem às cores do player:

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/sct0-7rs2zY&amp;hl=pt_BR&amp;fs=1?rel=0&amp;color1=0x006699&amp;color2=0x54abd6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/sct0-7rs2zY&amp;hl=pt_BR&amp;fs=1?rel=0&amp;color1=0x006699&amp;color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Se você já tem uma boa noção de cores em RGB, já deve ter notado que as partes destacadas nada mais são do que códigos de cores, apenas sem o sustenido invertido (#).

O código destacado que vem logo após color1 é a cor das bordas. O código destacado que vem logo após color2 é a cor do player. As regras são as mesmas:

  • A cor que você aplicar no primeiro color1 deve ser aplicada no segundo color1.
  • A cor que você aplicar no primeiro color2 deve ser aplicada no segundo color2.

Para ficar bem fácil de visualizar, segue um exemplo de código onde o player está preto (000000) e suas bordas estão verde-limão (00ff00):

<object width="500" height="25"><param name="movie" value="http://www.youtube.com/v/sct0-7rs2zY&amp;hl=pt_BR&amp;fs=1?rel=0&amp;color1=0x00ff00&amp;color2=0x000000"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/sct0-7rs2zY&amp;hl=pt_BR&amp;fs=1?rel=0&amp;color1=0x00ff00&amp;color2=0x000000" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="25"></embed></object>

Como fica:


Você terá mais facilidade para personalizar as cores do seu player se ler também:

Até mais!

07/12/2013 - Mesmo defasado, este post continuará no ar para consulta histórica.
Related Posts Plugin for WordPress, Blogger...