Por Ricardo Fraga; Para O TechTudo


Incorporar vídeos do YouTube em sites e blogs se tornou um processo mais do que corriqueiro. Afinal, todo mundo quer dar mais vida aos seus textos e, para isso, nada melhor do que inserir um vídeo. Mas, dependendo do layout do site ou blog, o player padrão do YouTube (escuro) acaba destoando do restante do conteúdo, o que não agrada a todos.

Personalizando as cores do Player do YouTube (Foto: Reprodução) — Foto: TechTudo

Pensando neste problema, o TechTudo montou um passo a passo de como alterar a cor do player e da barra de progressão ao incorporar um vídeo.

Passo 1. Acesse o vídeo desejado no YouTube. Neste tutorial, utilizamos este vídeo;

Passo 2. Após acessar o vídeo, selecione a opção “Compartilhar” (1), depois clique em “Incorporar” (2), faça as alterações necessárias nas configurações do vídeo e, por último, copie o código gerado pelo YouTube (3);

Passo 3. Acesse o editor CMS utilizado no seu blog ou site e altere o modo de edição para HTML;

Passo 4. Cole o código copiado no passo 2 no editor e insira, após o final da URL do vídeo (encontrada no atributo “src”), o seguinte conteúdo: ?theme=light&color=red;

Passo 5. A variável “theme” será a responsável por modificar a cor do player em si. Nela, os usuários podem escolher entre os valores “light” (tema claro) ou “dark” (tema escuro). Já a variável “color” é responsável por definir a cor da barra de progressão. Nela, o usuário pode utilizar “red” (vermelho) e “white” (branco). Veja, na imagem abaixo, as quatro combinações de cores possíveis;

Combinações de cores do player do YouTube (Foto: Reprodução/YouTube) — Foto: TechTudo

Passo 6. O resultado final da alteração no código ficará assim:

<iframe width="620" height="349" src="http://www.youtube.com/embed/_Or94kDH5Fo?theme=light&color=red" frameborder="0" allowfullscreen></iframe>

No vídeo abaixo, você poderá ver o vídeo que incorporamos utilizando o código acima, que está utilizando o tema “light” e a cor da barra de progressão vermelha.

Mais do TechTudo