유튜브 썸네일 검은 막 제거하기

기여 기능
1

일부 시간 전에 YouTube 임베드의 검은색 바(레터박스)가 있는 경우 이를 제거하는 방식으로 개선되었습니다.

그러나 많은 영상의 썸네일에서는 여전히 검은색 바가 남아 있습니다. 이 문제도 해결할 수 있을까요?

3개의 좋아요
2

백색 바에 대한 특정 변경 사항은 hqdefault 대신 maxresdefault 이미지를 사용하도록 한 것입니다. 그러나 모든 비디오에 고해상도 섬네일이 있는 것은 아니므로, 그런 경우 hqdefault와 동일한 opengraph 이미지로 폴백합니다.

해당 이미지 크기는 다른 종횡비를 가지며 검은색 바를 포함합니다. 하지만 두 경우 모두 종횡비가 16:9로 고정되어 있으므로, 플레이어 표시 시 검은색 바가 보이지 않아야 합니다.

고해상도 이미지가 없는 비디오의 예시로, 이 비디오는 섬네일로 이 이미지를 사용하고 있습니다.

이 문제가 발생하는 사례를 몇 가지 공유해 주시겠습니까?

3개의 좋아요
3

네, 관심 가져주셔서 감사합니다.

아래는 임베드에서 지금은 잘 보이지만, 썸네일(그리고 미리보기)에서는 검은색 바가 표시되는 몇 가지 영상입니다:

og:image는 다음과 같습니다:

480×360 39.9 KB

말씀하신 대로 … 검은색 바가 있습니다.

그리고

og:image는 다음과 같습니다:

480×360 37.4 KB

말씀하신 대로 … 검은색 바가 있습니다 …

참고로, 여기는 "정상적인 경우"입니다:

이 경우 og:image는 훨씬 더 큽니다:

1280×720 71.5 KB

현재 저는 Topic List Previews Sidecar 플러그인을 사용하여 플러그인의 전용 오버라이드를 이용해 잘라내면서 썸네일을 재생성하고 있습니다:

https://github.com/paviliondev/discourse-topic-previews-sidecar/blob/323951f7c8abb5595b38bbf77eca305939701a24/lib/optimized_image_edits.rb#L27

… 하지만 코어에서 이를 자동으로 처리할 수 있다면 좋겠습니다. 반자동으로 계속 해야 하는 것은 매우 번거롭기 때문입니다.

도전은 어떤 이미지를 자를 수 있는지를 식별하는 것입니다.

YouTube 이미지가 4:3 비율이거나 특정 해상도 이하(즉, 검은색 바가 있을 수밖에 없는 경우)인 것을 발견하면 단순히 16:9로 강제하면 되는 건가요?

아마도 optimize image에 YouTube를 처리하고 있다는 것을 알려주는 플래그를 전달해야 한다는 뜻이 될 것 같습니다.

YouTube가 썸네일을 16:9로 표준화하지 않는다는 것이 제게는 이상하게 느껴집니다. 제가 무언가를 놓치고 있는 걸까요 …

크기 차이에 대해 알려주셔서 감사합니다!

4

이제 무슨 말씀인지 이해한 것 같은데, 코어에서 이미지를 처리하는 방식은 우리의 사용 사례에는 잘 맞지 않는 것 같습니다. 이 임베드(thumbnail)에 대한 썸네일을 저장하지 않고, 필요할 때 YouTube에서 직접 가져오기 때문입니다.

그렇다고 해서 어떤 이미지를 자를지 파악하는 것이 어렵지는 않을 것입니다. URL을 보면 알 수 있습니다:

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

maxresdefault

  • 항상 16:9 비율입니다.
  • 가장 높은 해상도입니다.
  • 항상 사용 가능한 것은 아닙니다.

hqdefault

  • 항상 4:3 비율입니다.
  • 원본 영상이 16:9인 경우, 검은색 바(레터박스)가 추가됩니다.

mqdefault

  • 항상 16:9 비율입니다.
  • hqdefault보다 해상도가 더 낮습니다.

조금 이상해 보이지만, 규칙적입니다. 4:3 형식은 호환성을 위해 여전히 사용 중인 레거시 크기라고 추측합니다.

16:9 비율의 이미지를 표시하려면 종횡비를 수정하는 것만으로 충분합니다. 다른 종횡비가 필요하다고 생각되면, 플래그를 전달하고 CSS로 스케일을 보정하면 잘 작동할 것입니다.

컴포저 미리보기가 개선될 수 있다는 점은 맞지만, 위에서 설명한 것과 유사한 접근 방식으로 이를 수행할 수 있을 것입니다.

이 접근 방식에서 제가 볼 수 있는 유일한 예외 케이스는 해상도가 낮은 세로 영상입니다. 그 경우 검은색 바가 표시되지 않습니다. :man_shrugging:

480×360 11.4 KB

2개의 좋아요
5

하지만 코어는 게시글 처리(cooking post process) 과정의 일환으로 다양한 해상도의 자체 파생 썸네일을 생성하고 저장하지 않나요?

이 부분이 바로 검은색 바(블랙 바)가 유지되는 곳입니다.

정답이네요!

어쨌든 제 플러그인을 개선하는 데 활용할 수 있을 것 같은 정말 유용한 정보입니다. 정말 감사합니다!

GPT-4 비전에게 검은색 바가 있는지 물어보거나 이미지 매직(ImageMagick)을 이용해 검은색 바를 감지하는 것보다 훨씬 간단하네요.

1개의 좋아요
6

귀하의 통찰 덕분에 Topic List Previews를 토글할 필요가 없는 훨씬 더 간단한 솔루션으로 업데이트했습니다. 이 솔루션은 이미지가 유튜브 레거시 4:3 썸네일인 경우에만 자르기를 수행하기 때문입니다.

https://github.com/paviliondev/discourse-topic-previews-sidecar/pull/173

이것이 코어에 유용할 만큼 충분히 일반적인가요?

2개의 좋아요