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.
Pix meutedio arroba mail ponto com

10 comentários:

  1. nossa, adorei o tutorial.
    muito bom mesmo, bem explicadinho, organizadinho.
    NOTA 10 não tinha como ficar melhor (=

    parabéns =**

    ResponderExcluir
  2. Naum enterdi Muito naum sei muito sobre as cores do (RGB)Mais amei o site benn organizado Voc^ esta de Parabéns

    ResponderExcluir
  3. O meu player ficou branco quando fui fazer o teste pelo Orkut. Os códigos das cores não aparecem. Tem como arrumar isso ou meu navegador estar sem complementos para tal? Desculpa mandar como "Anônino", mas o burro aqui não sabe mandar como Nome/URL ¬¬'

    Perfil: Henrique, São Paulo - SP

    ResponderExcluir
  4. Henrique, o orkut nunca lê 100% dos códigos HTML, CSS e JavaScript. Muita coisa ele bloqueia ou ignora por segurança, já que há muitos scripts maliciosos.

    ResponderExcluir
  5. perfeito amei de verdade otimo site parabéns se puder segue?
    biialourenco.blogspot.com

    ResponderExcluir
  6. Simplesmente perfeito! Não entendo bulhufas de HTML, mas com suas dicas consegui inserir o mini player e ainda personalizar tamanho e cor de acordo com meu blog! Meus sinceros parabéns pela postagem!

    ResponderExcluir
  7. Helem boa noite!
    Parabéns pelo site muito bom juntamente com toda a organização dos conteúdos.
    Por acaso saberia me informar se houve alguma mudança nos códigos pois não aparece mais as configurações do player no meu perfil da aeria games.
    Grato

    ResponderExcluir
  8. Pedro, houve mudança nos códigos sim e ficou ainda mais simples de personalizar pois agora é <iframe>.

    ResponderExcluir
  9. nao entendi , meu player simplesmente continuou preto :v

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.