Novidades100 - Dicas de Internet e Computador

Personalizar Player Incorporado do You Tube

Adicionar Parâmetros da Biblioteca do You Tube em Código de Incorporação

Se você trabalha muito com códigos de incorporação de vídeos do You Tube e gosta de customizar suas páginas, deve aproveitar bem esta dica de personalização de códigos embed de vídeos no seu site e/ou blog.
A adição desses parâmetros ao url do swf permite que você defina elementos como cores e bordas e também decida se a API JavaScript deve ser ativada ou não para o player.
Veja abaixo alguns parâmetros da biblioteca do You Tube para códigos embed, logo após, a forma detalhada em negrito de como e aonde inserí-las para que seja executado da forma correta no navegador (todos os parâmetros são opcionais, você pode adicionar uns e outros não).
rel - Valores: 0 ou 1. O padrão é 1 (um) Define se o player deve carregar vídeos relacionados depois que a reprodução do vídeo inicial é iniciada.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?rel=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?rel=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

autoplay - Valores: 0 ou 1. O padrão é 0 (zero). Define se o vídeo inicial será reproduzido automaticamente ou não quando o player for carregado.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?autoplay=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

loop - Valores: 0 ou 1. O padrão é 0 (zero). No caso de um único player de vídeo, uma configuração igual a 1 (um) fará com que o player reproduza o vídeo inicial repetidamente. No caso de um player de lista de reprodução o player reproduzirá toda a lista depois repetirá a lista.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?loop=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?loop=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

border - Valores: 0 ou 1. O padrão é 0 (zero). Definindo o parâmetro como 1 (um) haverá uma borda no player. A cor primária da borda é definida pelo parâmetro color1 e a cor secundária, pelo parâmetro color2.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?border=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?border=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

color1 - Valor: Qualquer valor de RGB em formato hexadecimal (Ex: 0x329BBB, 0xAAA000). Color1 é a cor primária da borda.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?color1=0xffcc00"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?color1=0xffcc00" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

color2 - Valor: Qualquer valor de RGB em formato hexadecima (Ex: 0x329BBB, 0xAAA000). Color2 define a cor de fundo da barra de controles do player e a cor secundária da borda.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?color2=0xffcc00"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?color2=0xffcc00" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

fs - Valores: 0 ou 1. O padrão é 0 (zero). Se você definir este valor com 1 (um), o botão de tela cheia estará disponível para os usuários.
Obs: Para que este parâmetro funcione note que você deve incluir alguns argumentos extras ao seu código, veja destacado abaixo, em verde.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?fs=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

hd - Valores: 0 ou 1. O padrão é 0 (zero). Se você definir este parâmetro como 1 (um), o vídeo será reproduzido em alta definição, a menos que não haja nehuma versão em alta definição disponível. É aconselhável você não ativar este parâmetro pois será muito prejudicial a conexões lentas.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?hd=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?hd=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

showinfo - Valores: 0 ou 1. O padrão é 0 (zero) Definir este parâmetro como 0 (zero) impedirá que o player exiba informações do vídeo, como o título e a classificação.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?showinfo=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?showinfo=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

iv_load_policy - Valores: 1 ou 3. O padrão é 1 (um). Definir esse parâmetro como 3 (três) fará com que as anotações do vídeo não sejam exibidas para o usuário.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?iv_load_policy=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?iv_load_policy=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

cc_load_policy - Valor: 1. O padrão é baseado na preferência do usuário. Definir esse parâmetro como 1 (um) fará com que as legendas ocultas sejam mostradas por padrão, independente de que o usuário as tenha desativado.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?cc_load_policy=1"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?cc_load_policy=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

Adicionar mais de um Parâmetro

Para adicionar mais de um parâmetro (você pode adicionar quantos quiser ou nenhum), separe-os cada um por um & - Veja no exemplo abaixo.

<object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/PUWzy9EjZkc?cc_load_policy=1&color1=0xffff00&color2=
0x0000ff&border=1&fs=1&autoplay=1
"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/PUWzy9EjZkc?cc_load_policy=1&color1=0xffff00&color2=
0x0000ff&border=1&fs=1&autoplay=1
" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object>

| | HomePage | Relatar Problema |