비디오로 재설계된 Reddit 토픽 임베딩

포스트에 Reddit 영상을 어떻게 임베드할 수 있나요? 예를 들어 이 포스트:

링크

이런 임베드 코드가 있습니다:

<blockquote class="reddit-card" data-card-created="1588774544"><a href="https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/">I also decided to edit at 2AM</a> from <a href="http://www.reddit.com/r/VALORANT">r/VALORANT</a></blockquote>
<script async src="//embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>

이건 어때요?

  https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/

이 링크는 이렇게 동작합니다:

아, 이건 안 되겠네요. 디스코스에서 바로 영상이 재생되길 원하시는 거지, 리디트로 이동하는 건 원치 않으시죠.

1개의 좋아요

감사합니다.
가능하다면 유튜브나 Vimeo처럼 바로 거기서 재생할 수 있으면 좋겠어요.

두 분은 그렇게 원하시지만, Reddit이 원하는 것은 고려해 보셨나요?

그들이 전체 철학을 바꾸고 v.redd.it 같은 서비스를 시작한 이후로는 상황이 더 이상 동일하지 않습니다.

모든 OpenGraph와 Twitter Card 태그가 우리에게 제공하는 것은 정적 이미지입니다. Reddit은 정적 이미지만 임베드할 수 있다고 명확히 밝히고 있습니다.

더 깊이 파고들면 비디오가 DASH 컨테이너에 포함되어 있어 오디오와 비디오가 별도의 파일로 나뉘어 있음을 알 수 있습니다. 이를 Discourse에서 재생하려면 최소한 커스텀 JS 비디오 플레이어를 사용해야 합니다.

1개의 좋아요

실제로 Reddit에서는 이를 허용하고 있습니다:

Embed 버튼을 누르면 다음과 같은 내용을 제공합니다:

제 문제는 제 Discourse 사이트의 게시물에 이를 표시하도록 허용하는 방법입니다.

old.reddit 공유를 시도해 봤는데, 이거 역시 이미지로만 표시됩니다. 이게 새로운 Reddit UI인가요?

응, 새로운 거야.

1개의 좋아요

아, embed.ly에 아웃소싱하는 것 같네요.

조금 더 파고들어 보니, 게시글 ID를 사용하면 결국 제대로 동작하는 iFrame을 구성할 수 있는 것 같습니다.

@techAPJ가 이 작업을 맡지 않는 한, #pr-welcome이라고 하겠습니다.

<iframe src="https://old.reddit.com/mediaembed/gdyrsg" width="690" height="388">

[동작하고 자동으로 재생되는 IFRAME]

2개의 좋아요

@Falco, 비디오가 자동 재생되지 않도록 하는 방법을 찾아볼 수 있을까요?

수정: HTML 산타이저에서 iframe 요소에 allow="autoplay 'none'"를 강제 적용하면 이 문제를 해결할 수 있을 것 같습니다 (새로운 브라우저에서만).

게이머의 버튼도 아무것도 작동하지 않습니다(예: 일시정지, 전체 화면 등).

이 작업에 대한 PR을 맡을 사람이 있나요? :thinking:

이 예시 URL에서 공유 > 임베드 버튼을 클릭한 다음, 이 코드를 복사해 보세요:

<iframe id="reddit-embed" 
src="https://www.redditmedia.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/?ref_source=embed&amp;ref=share&amp;embed=true" 
sandbox="allow-scripts allow-same-origin allow-popups" 
style="border: none;" scrolling="no" 
width="640" height="419">
</iframe>

비디오는 작성 창에 임베드되고 재생됩니다:

하지만 게시물이 제출되면 비디오가 사라집니다.

iframe 요소 끝에 allow="autoplay 'none'"를 추가하면 비디오가 나타나고, 모든 임베드 컨트롤(일시정지, 재생 등)이 정상 작동하며 재생됩니다:

<iframe id="reddit-embed" 
src="https://www.redditmedia.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/?ref_source=embed&amp;ref=share&amp;embed=true" 
sandbox="allow-scripts allow-same-origin allow-popups" 
style="border: none;" scrolling="no" 
width="640" height="419" 
allow="autoplay 'none'">
</iframe>

다음과 같습니다: