Eliminar barras pretas nos thumbnails do YouTube

Os embeds do YouTube foram aprimorados há algum tempo, removendo as barras pretas, se presentes.

No entanto, elas persistem nas miniaturas de muitos vídeos. Isso também pode ser abordado?

3 curtidas

A alteração específica sobre as barras pretas foi usar a imagem maxresdefault em vez da hqdefault. No entanto, nem todos os vídeos têm uma miniatura de alta resolução, então nesses casos, recorremos à imagem opengraph, que é equivalente a hqdefault.

Esse tamanho de imagem tem uma proporção diferente e inclui barras pretas. Mas em ambos os casos, a proporção é fixa em 16:9, então as barras pretas não devem ser visíveis ao exibir o player.

Aqui está um exemplo de um vídeo que não tem uma imagem de alta resolução e está usando esta para a miniatura.

Você pode compartilhar alguns exemplos onde isso está acontecendo?

3 curtidas

Com certeza, obrigado pelo seu interesse.

Aqui estão alguns vídeos que agora ficam ótimos no embed, mas exibem barras pretas nas miniaturas (e na pré-visualização):

og:image é:


como você bem apontou… tem barras pretas.

E

og:image é:


como você bem apontou… tem barras pretas…

NB Aqui está um “bom caso”:

og:image neste caso é muito maior:


Atualmente estou usando meu plugin Topic List Previews Sidecar para regenerar as miniaturas enquanto as recorto usando as substituições personalizadas do plugin:

… mas uma forma automatizada de fazer isso no core seria ótimo, pois é super chato ter que fazer isso semi-manualmente.

O desafio é identificar quais imagens podem ser cortadas?

É apenas uma questão de forçar 16:9 se você descobrir que a imagem do YouTube é 4x3 ou abaixo de uma certa resolução (o que significa que deve ter barras pretas?).

Acho que isso pode significar que o otimizador de imagem está recebendo uma flag para dizer que está lidando com YouTube?

Parece estranho para mim que o YouTube não padronize miniaturas 16:9?! Talvez eu esteja perdendo alguma coisa…

Obrigado por me esclarecer sobre a diferença de tamanho!

Eu acho que agora entendo o que você quer dizer, mas processar imagens no core não se encaixa realmente no nosso caso de uso para elas. Nós não armazenamos as miniaturas para esses embeds, nós as buscamos diretamente do YouTube quando precisamos delas.

Dito isso, identificar quais imagens devem ser cortadas não deve ser tão difícil. Você pode olhar o URL para isso:

https://img.youtube.com/vi/dsVAzSG6SbM/hqdefault.jpg

maxresdefault

  • É sempre 16:9.
  • É a maior resolução.
  • Nem sempre está disponível.

hqdefault

  • É sempre 4:3.
  • Se o vídeo original for 16:9, ele adiciona barras pretas.

mqdefault

  • É sempre 16:9.
  • É uma resolução ainda menor que hqdefault.

Embora um pouco estranho, eles são previsíveis. Minha suposição é que o formato 4:3 é um tamanho legado que eles ainda usam por uma questão de compatibilidade.

Para exibir imagens 16:9, é tão simples quanto corrigir a proporção. Se você precisar de outras proporções, acho que você pode passar um flag e compensar a escala com CSS.

É verdade que a pré-visualização do composer pode ser melhorada, mas isso poderia ser feito com uma abordagem semelhante à descrita acima.

O único caso extremo que consigo ver com essa abordagem é com vídeos verticais com miniaturas de baixa resolução. Nesses casos, as barras pretas não são exibidas. :man_shrugging:

2 curtidas

Mas o core cria e armazena suas próprias miniaturas derivadas em várias resoluções como parte do processo de cozimento da postagem?

É aqui que as barras pretas são retidas.

Bingo!

Mas, em qualquer caso, essa é uma informação super útil que posso usar para melhorar meu plugin. Muito obrigado!

Isso é muito mais direto do que perguntar ao GPT-4 Vision se existem barras pretas ou usar o ImageMagick para detectá-las.

1 curtida

Graças à sua visão, atualizei Topic List Previews com uma solução muito mais simples que não precisa ser ativada, pois só cortará se a imagem for uma miniatura legada 4:3 do YouTube.

Talvez isso seja genérico o suficiente para ser útil ao core?

2 curtidas