YouTube 쇼츠 영상 임베딩/원박스 처리가 작동하지 않아요

안녕하세요!

제 포럼에서는 YouTube 동영상 임베딩이 잘 작동하지만, URL에 /shorts/가 포함된 짧은 영상(예: 아래 링크)은 작동하지 않습니다:

Onebox 요청 시 404 오류가 반환됩니다.

일반적인 YouTube 동영상 임베딩은 정상적으로 작동합니다.
try.discourse나 meta에서는 이 문제를 겪지 않습니다.
사이트 설정이 제대로 구성되지 않아서 발생하는 것 같습니다.

어떤 문제가 있을지 알 수 있을까요?


유튜브 원박스(Oneboxing)는 우리가 직접 만든 커스텀 기능입니다. 쇼츠(Shorts) 호환성을 위해 누군가가 #pr-welcome을 제출해야 합니다. #contribute:feature로 이동합니다.

그동안 허용된 iframe 사이트 설정에 수동으로 iframe URL을 추가할 수 있습니다:

다만 아주 긴 형식입니다 :rofl:

3개의 좋아요

서버의 위치 때문일 수 있습니다. 예를 들어, 여기와 같이: Youtube embeddings have stopped working for servers in Europe

1개의 좋아요

확인해 주셔서 감사합니다!

영상처럼 표시되려면 허용된 iframe에 어떤 URL을 추가해야 하는지 알려 주실 수 있나요? 실제로 높이가 크더라도 지금은 그걸로 충분합니다.


영상 높이에 대해서는 iframe에 CSS로 max-height를 설정하여 높이를 줄일 수 있습니다. 문제는 iframe에 짧은(세로형) 비디오임을 지정하는 어떤 속성도 없다는 것입니다. :confused:

<iframe width="672" height="1194" src="https://www.youtube.com/embed/SWeTMdyv50Q" frameborder="0" allowfullscreen="">

https://www.youtube.com/embed/

Falco, 감사합니다.

가까워진 것 같긴 한데, 여전히 약간 혼란스럽습니다.

그래서, 허용된 iframe 목록에 이 URL을 추가했습니다.

그런데, 이제 영상을 표시하려면 무엇을 해야 하나요?

게시글에 https://www.youtube.com/shorts/SWeTMdyv50Q를 입력하면 작동하지 않습니다.
<iframe>https://www.youtube.com/shorts/SWeTMdyv50Q</iframe>를 입력해도 작동하지 않습니다.
https://www.youtube.com/embed/SWeTMdyv50Q를 입력하면 작동은 하지만, 짧은 영상(Shorts)이 표준 YouTube 영상의 가로세로 비율(16:9)로 표시됩니다. (저에게는 괜찮지만, 다른 비율을 사용하고 싶고 URL에 "embed"를 수동으로 입력하고 싶지는 않습니다.)

숏츠 비디오를 마우스 오른쪽 버튼으로 클릭한 후 "임베드 코드 복사"를 선택하세요. 제가 말씀드린 "수동 임베드 코드"가 바로 이것을 의미하는 것이었습니다. 명확하게 설명하지 못해 죄송합니다.

2개의 좋아요

또한, /shorts/를 watch?v=로 교체하면 YouTube 비디오의 기본 URL이 작동합니다.

즉, YouTube에서 https://www.youtube.com/shorts/SWeTMdyv50Q에서 마우스 오른쪽 버튼으로 클릭하여 '비디오 URL 복사’를 선택하면 https://youtu.be/SWeTMdyv50Q가 반환되므로 작동합니다. 이 URL은 Discourse에서 올바르게 표시되지만, 비율은 일반적인 widescreen 비율로 표시됩니다.

2개의 좋아요

저는 개발자가 아니지만, 그렇게 하면 pr-welcome 라벨이 붙은 작업이 개발자에게 더 쉬워지지 않을까 추측해 봅니다.

2개의 좋아요

다만, GitHub에 아직 익숙하지 않아서 그런지 풀 리퀘스트를 좀 엉망으로 만들었을 수도 있습니다… 정말로 매뉴얼을 읽어봐야 할 것 같습니다 (그리고 친구 말로는 내 Discourse 포크에서 브랜치를 만들어야 한다고 하더군요…). :upside_down_face:

참고로, lib\onebox\engine\youtube_onebox.rb 파일을 수정하여 아래 내용을 추가했습니다.

# https://www.youtube.com/shorts/wi2jAtpBl0Y
if uri.path["/shorts/"]
  id ||= uri.path[/\/shorts\/([\w\-]+)/, 1]
end
1개의 좋아요

shorts를 embed로만 바꾸면 더 쉬울까요?

무엇을 말씀하시는지는 잘 모르겠습니다.

보통 사람들은 주소창에서 YouTube 링크를 복사해서 붙여넣습니다.

이제 YouTube에 새로운 /shorts/ URL이 생겼는데, 사람들은 이 /shorts/ 링크를 복사해서 붙여넣게 되죠. 그런데 아직 YouTube 원박스(Oneboxing)가 이 링크를 지원하지 않습니다.

/embed/ 링크는 지원하지만, 사용자가 YouTube에서 임베드 URL을 직접 찾아야 하는데, 그런 사람은 거의 없습니다 :thinking:

1개의 좋아요

그 url만 바꾸면 더 쉬운 작업이 될지 궁금합니다. youtube.com/shorts/something과 youtube.com/embed/something은 완전히 같고, /embed/를 사용하면 여기에서 원복싱/임베딩이 정상적으로 작동하기 때문입니다.

https://youtube.com/shorts/aQFdwUeZxkA는 작동하지 않습니다:

하지만 https://youtube.com/embed/aQFdwUeZxkA는 작동합니다:

여전히 무슨 말씀인지 이해가 안 됩니다. 누가 URL을 바꾸는 건가요? 게시자? 하지만 게시자는 URL의 일부를 수동으로 다시 쓰기를 원하지 않습니다(영상이 왜 임베드되지 않는지 이유조차 모를 테니까요), 그냥 복사-붙여넣기해서 바로 동작하기를 원할 뿐입니다.


수정: 아니면 Discourse의 Oneboxing 코드가 /shorts/를 /embed/로 대체한다는 말씀이신가요?

네, 그럴 수도 있겠네요! 저는 딱히 코드 전문가가 아니거든요 :smile:

네. 그리고 저는 코딩을 전혀 못하지만, 단순히 대체하는 것은 그렇게 어렵지 않을 것 같다고 상상해 봅니다 :wink:

2개의 좋아요

이 둘은 최종 결과가 동일한가요? 즉, 쇼츠 영상이 재생 기능이 포함된 상태로 깔끔하게 임베드된다는 뜻인가요?

음… 내가 제대로 이해한 건지 잘 모르겠어요. :sweat_smile:

  1. https://www.youtube.com/embed/SWeTMdyv50Q

  2. https://www.youtube.com/shorts/SWeTMdyv50Q

  3. http://youtu.be/SWeTMdyv50Q은 https://www.youtube.com/watch?v=SWeTMdyv50Q으로 연결됩니다.

이 세 가지 다른 링크 형식은 YouTube에서 서로 다른 방식으로 표시됩니다.

URL 형식이 무엇이든, 코드는 비디오 ID만 신경 씁니다:

현재 코드는 /shorts/를 지원하지 않으며, 이를 작동시키는 여러 가지 방법이 있습니다.

코딩 초보자로서 제 제안은 이 부분을 복제하는 것입니다:

그리고 embed를 shorts로 교체하는 것입니다. 제 개발 환경에서 시도해 보았는데 완벽하게 작동합니다.

더 우아한 방법이 있다면 알려주시면 감사하겠습니다 :slight_smile:

2개의 좋아요

훌륭한 작업이네요 @Canapin :clap:

풀 리퀘스트를 제출하고 싶은 건가요?

네, ruby 테스트 파일에서 좀 막혀 있습니다. 작동하지도 않고 왜 그런지도 모르겠어요. 단위 테스트를 사용해 보거나 만들어 본 적이 없어서…

수정해야 하는 파일은 discourse/spec/lib/onebox/engine/youtube_onebox_spec.rb at 493d437e79f88ab9829a36fa000cc6107085e424 · discourse/discourse · GitHub 입니다.

파일 하단에 아래 코드를 추가해 봤습니다:

  it "can parse youtube shorts results" do
    preview = expect(Onebox.preview('https://www.youtube.com/watch?v=wi2jAtpBl0Y').placeholder_html)
    preview.to match(/reacts/)
    preview.to match(/hqdefault/)
  end

그리고 파일 상단의 before do 블록 안에도 아래 코드를 추가했습니다:

stub_request(:get, "https://www.youtube.com/shorts/wi2jAtpBl0Y").to_return(status: 200, body: onebox_response("youtube-shorts"))`

bin/rspec spec/lib/onebox/engine/youtube_onebox_spec.rb 명령으로 테스트를 실행했는데, 제가 추가한 테스트가 실패합니다.

지금 바로 에러 메시지를 확인할 수는 없고, 앞으로 몇 시간 동안은 바쁠 것 같습니다.

이제 작동합니다:

https://www.youtube.com/shorts/kt7jiaGVsto

1개의 좋아요