Como personalizar as cores do Player do YouTube

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)Personalizando as cores do Player do YouTube
(Foto: Reprodução)

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)Combinações de cores do player do YouTube (Foto: Reprodução/YouTube)

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.

0 votes, average: 0,00 out of 50 votes, average: 0,00 out of 50 votes, average: 0,00 out of 50 votes, average: 0,00 out of 50 votes, average: 0,00 out of 5 (0 votos, média: 0,00 por 5)
You need to be a registered member to rate this post.
Loading ... Loading ...

Sobre Diablos 4-Ever

Eu não exploro as falhas, São as falhas que me exploram.

Comentários estão fechados.