Embedding redesigned reddit topics with video

[hjalali (Hossein Jalali)]

How can we embed reddit videos in our post? For example this post:

Link here

Has an embed code like this:

<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>

[pfaffman (Jay Pfaffman)]

How about this?

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

Which does this:

r/VALORANT - I also decided to edit at 2AM

Oh. That’s no good. You want the video to play in discourse, not bump you to Reddit.

[hjalali (Hossein Jalali)]

Thanks.
Yeah we want to if possible play it right there like YouTube and Vimeo.

[Falco]

@pfaffman

You want the video to play in discourse, not bump you to Reddit.

@hjalali

Yeah we want to if possible play it right there like YouTube and Vimeo.

Haha you two want that, but have you considered what Reddit wants?

Since they changed their whole philosophy and started the v.redd.it thing it is not the same anymore.

@pfaffman

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

All OpenGraph and Twitter Card tags give us a static image. Reddit is pretty clear on only allowing a static image to be embedded.

If you did further, you find that the video is in a DASH container, so audio and video are separate files. Getting that to play on Discourse means, at least, using a custom JS video player.

[hjalali (Hossein Jalali)]

Actually Reddit is allowing this:

When you press on the Embed button it provides the following:

My issue is how to allow that to display in my post in my Discourse site.

[Falco]

I tried the old.reddit share and it’s just an image too. Is that the new reddit UI?

[hjalali (Hossein Jalali)]

Yeah its the new one.

[Falco]

Oh looks like they are outsourcing it to embed.ly.

Digging into it, appears that using the post ID can be used to construct a working iFrame after all.

Unless @techAPJ wants to take it, I’d say pr-welcome

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

[AN IFRAME THAT WORKS AND AUTOPLAYS THE VIDEO]

[riking (Kane York)]

@Falco, can we figure out something that doesn’t autoplay the video?

Edit: If we forcibly apply allow="autoplay 'none'" to the iframe element in the html sanitizer, that might fix this (on new browsers only).

[hjalali (Hossein Jalali)]

Also none of the buttons on the player work (e.g. pause, full screen, etc)

[Richie (Richie Rich)]

@Falco

إلا إذا أراد @techAPJ أن يتولى الأمر، سأقول pr-welcome

هل هناك من يرغب في تقديم طلب سحب (PR) لهذا؟

إذا نقرت على زر المشاركة > تضمين في عنوان URL المثال هذا: https://www.reddit.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/، ثم انسخ هذا الرمز:

<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>

يتم تضمين الفيديو وتشغيله في نافذة الإنشاء:

ولكن يختفي الفيديو بعد إرسال المنشور.

إضافة allow="autoplay 'none'" في نهاية عنصر iframe يجعل الفيديو يظهر، ثم يتم تشغيله بشكل جيد مع عمل جميع عناصر التحكم المضمنة (إيقاف مؤقت، تشغيل، إلخ):

<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>

مثل هذا: