# 유튜브 썸네일 검은 막 제거하기
**URL:** https://meta.discourse.org/t/eliminate-youtube-thumbnail-black-bars/319936
**Category:** Feature
**Created:** [8월 3, 2024, 5:37오전 UTC](https://meta.discourse.org/t/eliminate-youtube-thumbnail-black-bars/319936 "2024-08-03T05:37:22Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [8월 3, 2024, 5:37오전 UTC](https://meta.discourse.org/t/eliminate-youtube-thumbnail-black-bars/319936/1 "2024-08-03T05:37:22Z")
일부 시간 전에 YouTube 임베드의 검은색 바(레터박스)가 있는 경우 이를 제거하는 방식으로 개선되었습니다.
> [@유튜브 임베드 및/또는 썸네일 처리 방식이 변경되었나요?](https://meta.discourse.org/t/changes-in-the-way-youtube-embeds-and-or-thumbnails-are-being-handled/260787/4?u=merefield):
>
> I’m glad you liked it! The old plugin that was used to handle lazy loading for YouTube was written in jQuery and had some issues. So, we decided to modernize it. The rebake was needed because we made some slight changes in the way we store attributes for the embed, which now allows us to use this type of lazy loading on other providers like Vimeo. Feel free to reach out if you have more feedback on it.
그러나 많은 영상의 썸네일에서는 여전히 검은색 바가 남아 있습니다. 이 문제도 해결할 수 있을까요?
---
### Author:  [@jancernik](https://meta.discourse.org/u/jancernik)
#### Post date: [8월 6, 2024, 2:58오전 UTC](https://meta.discourse.org/t/eliminate-youtube-thumbnail-black-bars/319936/2 "2024-08-06T02:58:07Z")
백색 바에 대한 특정 변경 사항은 `hqdefault` 대신 `maxresdefault` 이미지를 사용하도록 한 것입니다. 그러나 모든 비디오에 고해상도 섬네일이 있는 것은 아니므로, 그런 경우 `hqdefault`와 동일한 opengraph 이미지로 폴백합니다.
>
해당 이미지 크기는 다른 종횡비를 가지며 검은색 바를 포함합니다. 하지만 두 경우 모두 종횡비가 16:9로 고정되어 있으므로, 플레이어 표시 시 검은색 바가 보이지 않아야 합니다.
고해상도 이미지가 없는 비디오의 예시로, 이 비디오는 섬네일로 [이 이미지](https://meta.discourse.org/uploads/short-url/2kS5nEo6LejeLjVqaXDJDiA8vtY.jpeg)를 사용하고 있습니다.
[ ](https://www.youtube.com/watch?v=5bEcaoyoJsI)
이 문제가 발생하는 사례를 몇 가지 공유해 주시겠습니까?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [8월 7, 2024, 6:52오전 UTC](https://meta.discourse.org/t/eliminate-youtube-thumbnail-black-bars/319936/3 "2024-08-07T06:52:01Z")
네, 관심 가져주셔서 감사합니다.
아래는 임베드에서 지금은 잘 보이지만, 썸네일(그리고 미리보기)에서는 검은색 바가 표시되는 몇 가지 영상입니다:
[ ](https://www.youtube.com/watch?v=ashRYryc5k8)
og:image는 다음과 같습니다:
말씀하신 대로 … 검은색 바가 있습니다.
그리고
[ ](https://www.youtube.com/watch?v=dsVAzSG6SbM)
og:image는 다음과 같습니다:
말씀하신 대로 … 검은색 바가 있습니다 …
참고로, 여기는 "정상적인 경우"입니다:
[ ](https://www.youtube.com/watch?v=_VyXGZpjXK0)
이 경우 og:image는 훨씬 더 큽니다:
현재 저는 Topic List Previews Sidecar 플러그인을 사용하여 플러그인의 전용 오버라이드를 이용해 잘라내면서 썸네일을 재생성하고 있습니다:
[https://github.com/paviliondev/discourse-topic-previews-sidecar/blob/323951f7c8abb5595b38bbf77eca305939701a24/lib/optimized\_image\_edits.rb#L27](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로 표준화하지 않는다는 것이 제게는 이상하게 느껴집니다. 제가 무언가를 놓치고 있는 걸까요 …
크기 차이에 대해 알려주셔서 감사합니다!
---
### Author:  [@jancernik](https://meta.discourse.org/u/jancernik)
#### Post date: [8월 13, 2024, 12:39오전 UTC](https://meta.discourse.org/t/eliminate-youtube-thumbnail-black-bars/319936/4 "2024-08-13T00:39:24Z")
이제 무슨 말씀인지 이해한 것 같은데, 코어에서 이미지를 처리하는 방식은 우리의 사용 사례에는 잘 맞지 않는 것 같습니다. 이 임베드(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로 스케일을 보정하면 잘 작동할 것입니다.
컴포저 미리보기가 개선될 수 있다는 점은 맞지만, 위에서 설명한 것과 유사한 접근 방식으로 이를 수행할 수 있을 것입니다.
이 접근 방식에서 제가 볼 수 있는 유일한 예외 케이스는 해상도가 낮은 세로 영상입니다. 그 경우 검은색 바가 표시되지 않습니다. 🤷♂️
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [8월 13, 2024, 5:06오전 UTC](https://meta.discourse.org/t/eliminate-youtube-thumbnail-black-bars/319936/5 "2024-08-13T05:06:34Z")
> [@jancernik](#):
>
> 이 임베드의 썸네일을 저장하지 않고, 필요할 때 YouTube에서 직접 가져옵니다.
하지만 코어는 게시글 처리(cooking post process) 과정의 일환으로 다양한 해상도의 자체 파생 썸네일을 생성하고 저장하지 않나요?
이 부분이 바로 검은색 바(블랙 바)가 유지되는 곳입니다.
> [@jancernik](#):
>
> `hqdefault`
>
> - 항상 4:3 비율입니다.
> - 원본 영상이 16:9 비율인 경우, 검은색 바가 추가됩니다.
정답이네요!
어쨌든 제 플러그인을 개선하는 데 활용할 수 있을 것 같은 정말 유용한 정보입니다. 정말 감사합니다!
GPT-4 비전에게 검은색 바가 있는지 물어보거나 이미지 매직(ImageMagick)을 이용해 검은색 바를 감지하는 것보다 훨씬 간단하네요.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [8월 19, 2024, 8:33오전 UTC](https://meta.discourse.org/t/eliminate-youtube-thumbnail-black-bars/319936/6 "2024-08-19T08:33:09Z")
귀하의 통찰 덕분에 [Topic List Previews](https://meta.discourse.org/t/topic-list-previews-theme-component/209973)를 토글할 필요가 없는 훨씬 더 간단한 솔루션으로 업데이트했습니다. 이 솔루션은 이미지가 유튜브 레거시 4:3 썸네일인 경우에만 자르기를 수행하기 때문입니다.
[https://github.com/paviliondev/discourse-topic-previews-sidecar/pull/173](https://github.com/paviliondev/discourse-topic-previews-sidecar/pull/173)
이것이 코어에 유용할 만큼 충분히 일반적인가요?