Ola pessoal, como estão?
Neste tutorial, vou mostrar como podemos forçar as legendas a aparecerem em um vídeo quando o adicionamos ao nosso site.
E não apenas isso, mas também veremos como podemos fazê-los aparecer por padrão no idioma que queremos.
Sumário
Se você não quiser ver toda a explicação, vou resumir os parâmetros que você pode usar para forçar as legendas automaticamente ao adicionar um vídeo do YouTube ao seu site:
- cc_load_policy=1 Para forçar as legendas
- cc_lang_pref=en Para indicar o idioma que as legendas irão aparecer, no exemplo em inglês
- hl = en Idioma em que aparecerá a interface do player, no exemplo em inglês
Vídeo tutorial
Inscreva-se no meu canal:
E se você puder gastar mais tempo aqui está uma explicação passo a passo com exemplos reais 🥳
Para forçar legendas em um vídeo do YouTube embutido em um site, você precisa adicionar um parâmetro no código HTML. o parâmetro é chamado 'cc_load_policy' e pode ter dois valores: '1' para mostrar as legendas ou '0' para ocultá-las.
Por exemplo, se você deseja que as legendas sejam exibidas por padrão em seu vídeo, basta adicionar '&cc_load_policy=1' ao final do código HTML do vídeo. O código completo ficaria assim:
<iframe width="705" height="315" src="https://www.youtube.com/embed/ZFXwJ9KBxZM?cc_load_policy=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>E o resultado será este:
Traduzir legendas automaticamente em um vídeo do YouTube incorporado em uma web
Você não apenas pode adicionar legendas, mas também pode escolher em qual idioma.
Cuidado
Eles só aparecerão se você tiver adicionado a legenda nesse idioma ao vídeo. Para fazer isso, você deve configurá-lo no próprio vídeo no YouTube
El parâmetro cc_lang_pref usado para especificar o idioma das legendas a serem exibidas ao carregar o vídeo do YouTube. Isso permite que os usuários selecionem o idioma de legenda preferido quando o vídeo é reproduzido. Isso é especialmente útil se o vídeo estiver disponível com legendas em vários idiomas, pois o usuário pode selecionar o preferido sem precisar alterar manualmente as legendas.
O código que exibiria as legendas em inglês ficaria assim:
<iframe width="705" height="315" src="https://www.youtube.com/embed/ZFXwJ9KBxZM?cc_load_policy=1&cc_lang_pref=en" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>E o resultado seria:
Mostre o Youtube Player no idioma que você deseja em seu site
Outro aspecto importante é mostrar os botões do próprio player no idioma que queremos.
Se você olhar os vídeos acima, verá que eles estão em espanhol. Aqui eu mostro como mudar isso.
El parâmetro hl O YouTube é usado para especificar o idioma no qual o conteúdo do player do YouTube é exibido. Isso inclui o interface do usuário, legendas, descrições de vídeo, tags e títuloss. Se nenhum idioma específico for especificado, o conteúdo do player será exibido no idioma padrão.
O código seria algo assim hl = en, alterando 'en' para o idioma que queremos:
<iframe width="705" height="315" src="https://www.youtube.com/embed/ZFXwJ9KBxZM?cc_load_policy=1&cc_lang_pref=en&hl=en" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>E o resultado seria:
PROS
- Melhore a acessibilidade do conteúdo para todos os usuários
- Os usuários podem alternar entre mostrar e ocultar legendas
- É relativamente fácil de implementar
CONS
- Requer configuração adicional, mas como você pode ver, é muito fácil
Espero que o tutorial tenha sido útil para você 😉