# Embedding redesigned reddit topics with video

**URL:** https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603
**Category:** Feature
**Tags:** pr-welcome
**Created:** [May 6, 2020, 2:18pm UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603 "2020-05-06T14:18:03Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![hjalali](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hjalali/32/181824_2.png) [@hjalali](https://meta.discourse.org/u/hjalali)
#### Post date: [May 6, 2020, 2:18pm UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603/1 "2020-05-06T14:18:03Z")

</div>

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

[Link here](https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/?utm_medium=android_app&utm_source=share)

Has an embed code like this:

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

```

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [May 6, 2020, 4:55pm UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603/2 "2020-05-06T16:55:57Z")

</div>

How about this?

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

```

Which does this:

https://embed.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/?embed=true&ref_source=embed&ref=share

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

---

<div class="post-metadata">

### Author: ![hjalali](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hjalali/32/181824_2.png) [@hjalali](https://meta.discourse.org/u/hjalali)
#### Post date: [May 6, 2020, 5:08pm UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603/3 "2020-05-06T17:08:41Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [May 6, 2020, 5:20pm UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603/4 "2020-05-06T17:20:08Z")

</div>

> [@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.

---

<div class="post-metadata">

### Author: ![hjalali](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hjalali/32/181824_2.png) [@hjalali](https://meta.discourse.org/u/hjalali)
#### Post date: [May 6, 2020, 5:23pm UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603/5 "2020-05-06T17:23:36Z")

</div>

Actually Reddit is allowing this:

 ![5-6-2020 6-21-57 PM](https://global.discourse-cdn.com/meta/original/3X/6/a/6a7fd54628ccfe844096b36a6d6143737ef75203.png)

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

 ![5-6-2020 6-22-17 PM](https://global.discourse-cdn.com/meta/original/3X/3/c/3c98ba71bf993649443ceddc8977c303fc377da0.png)

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

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [May 6, 2020, 5:26pm UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603/6 "2020-05-06T17:26:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![hjalali](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hjalali/32/181824_2.png) [@hjalali](https://meta.discourse.org/u/hjalali)
#### Post date: [May 6, 2020, 5:28pm UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603/7 "2020-05-06T17:28:11Z")

</div>

Yeah its the new one.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [May 6, 2020, 5:36pm UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603/8 "2020-05-06T17:36:53Z")

</div>

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]

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [May 6, 2020, 6:50pm UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603/9 "2020-05-06T18:50:24Z")

</div>

@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).

---

<div class="post-metadata">

### Author: ![hjalali](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hjalali/32/181824_2.png) [@hjalali](https://meta.discourse.org/u/hjalali)
#### Post date: [May 6, 2020, 6:53pm UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603/10 "2020-05-06T18:53:12Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Richie](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/richie/32/115110_2.png) [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [July 19, 2022, 9:38am UTC](https://meta.discourse.org/t/embedding-redesigned-reddit-topics-with-video/150603/11 "2022-07-19T09:38:22Z")

</div>

> [@Falco](#):
>
> Unless @techAPJ wants to take it, I’d say #pr-welcome

Any takers for a PR on this one? 🤔

If you click on the Share \> Embed button on [this](https://www.reddit.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/) example URL, then copy this code:

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

The video does embed _and play_ in the composer window:

 ![Screen Shot 2022-07-19 at 10.35.08](https://global.discourse-cdn.com/meta/original/4X/6/4/c/64cea8a745cd07c5b7d380f17d67164bdaacb934.png)

But the video then disappears when the post is submitted.

Adding `allow="autoplay 'none'"` on the end of the iframe element does then made the video appear, and it then plays fine with all the embed controls working (pause, play, etc):

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

Like so:

 ![Screen Shot 2022-07-19 at 10.37.51](https://global.discourse-cdn.com/meta/original/4X/d/b/5/db55fe0728da7d4a6238b206d752c1689ba80516.png)
