# Asciinema embedding

**URL:** https://meta.discourse.org/t/asciinema-embedding/20786
**Category:** Feature
**Created:** [October 5, 2014, 6:20am UTC](https://meta.discourse.org/t/asciinema-embedding/20786 "2014-10-05T06:20:45Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![swills](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/swills/32/45177_2.png) [@swills](https://meta.discourse.org/u/swills)
#### Post date: [October 5, 2014, 6:20am UTC](https://meta.discourse.org/t/asciinema-embedding/20786/1 "2014-10-05T06:20:45Z")

</div>

Would be fun and useful if posting links to [http://asciinema.org](http://asciinema.org) actually embedded the “video” (for lack of a better word). The docs on embedding are here: [https://asciinema.org/docs/embedding](https://asciinema.org/docs/embedding)

---

<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: [October 5, 2014, 10:18am UTC](https://meta.discourse.org/t/asciinema-embedding/20786/2 "2014-10-05T10:18:05Z")

</div>

Hmm, looks like their javascript will break if there are two copies of them on the page, to me…

[https://asciinema.org/a/14.js](https://asciinema.org/a/14.js)

---

<div class="post-metadata">

### Author: ![swills](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/swills/32/45177_2.png) [@swills](https://meta.discourse.org/u/swills)
#### Post date: [October 5, 2014, 1:30pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/3 "2014-10-05T13:30:23Z")

</div>

> [@riking](#):
>
> Hmm, looks like their javascript will break if there are two copies of them on the page, to me…

Ah, that’s too bad. Thanks for looking though.

---

<div class="post-metadata">

### Author: ![sickill](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sickill/32/120788_2.png) [@sickill](https://meta.discourse.org/u/sickill)
#### Post date: [October 6, 2014, 8:18am UTC](https://meta.discourse.org/t/asciinema-embedding/20786/4 "2014-10-06T08:18:38Z")

</div>

Asciinema project lead here,

You can embed any number of asciicasts on a single web page without a problem.

The only potentially troublesome situation is when you embed the same asciicasts (the same id) multiple times on a page. That’s because at the moment the script looks for a place to insert new div by looking up script tag by DOM id. However, that’s an edge case which in practice doesn’t occur at all - who would want to embed the same thing twice?

I’m happy to help you guys sort it out (including improvements to the embed js on Asciinema’s side if necessary).

---

<div class="post-metadata">

### Author: ![anon21958287](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@anon21958287](https://meta.discourse.org/u/anon21958287)
#### Post date: [October 6, 2014, 1:46pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/5 "2014-10-06T13:46:37Z")

</div>

> [@sickill](#):
>
> However, that’s an edge case which in practice doesn’t occur at all - who would want to embed the same thing twice?

On a forum where people can quote previous posts? This sort of thing happens _all the time_.

---

<div class="post-metadata">

### Author: ![sickill](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sickill/32/120788_2.png) [@sickill](https://meta.discourse.org/u/sickill)
#### Post date: [October 6, 2014, 1:59pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/6 "2014-10-06T13:59:42Z")

</div>

Fair enough. Let me find a way to solve that then.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [October 6, 2014, 8:16pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/7 "2014-10-06T20:16:49Z")

</div>

I moved 7 posts to a new topic: [Quoting images and videos from earlier in the topic?](https://meta.discourse.org/t/quoting-images-and-videos-from-earlier-in-the-topic/20846)

---

<div class="post-metadata">

### Author: ![sickill](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sickill/32/120788_2.png) [@sickill](https://meta.discourse.org/u/sickill)
#### Post date: [December 23, 2014, 5:42pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/8 "2014-12-23T17:42:36Z")

</div>

asciinema embed script is now updated with these issues in mind. You can now embed the same asciicast multiple times on the page without problems.

---

<div class="post-metadata">

### Author: ![Moter8](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moter8/32/120941_2.png) [@Moter8](https://meta.discourse.org/u/Moter8)
#### Post date: [December 23, 2014, 6:36pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/9 "2014-12-23T18:36:52Z")

</div>

Would be lovely if you could show us how we “install” this to our own Discourse installation and/or how people can embed asciinema-casts in their posts 😄 🐦

---

<div class="post-metadata">

### Author: ![sickill](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sickill/32/120788_2.png) [@sickill](https://meta.discourse.org/u/sickill)
#### Post date: [December 24, 2014, 10:22am UTC](https://meta.discourse.org/t/asciinema-embedding/20786/10 "2014-12-24T10:22:45Z")

</div>

I don’t know much about Discourse but the general way of embedding is described on this page: [https://asciinema.org/docs/embedding](https://asciinema.org/docs/embedding)

In short, to embed asciicast with id **123** you insert `<script type="text/javascript" src="https://asciinema.org/a/123.js" id="asciicast-123" async></script>` in the markup where you want the player to show up. There are extra `data-*` attributes that can be added to the script tag to customize the player. They’re described on the page mentioned above.

---

<div class="post-metadata">

### Author: ![Moter8](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moter8/32/120941_2.png) [@Moter8](https://meta.discourse.org/u/Moter8)
#### Post date: [December 24, 2014, 1:49pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/11 "2014-12-24T13:49:45Z")

</div>

> [@sickill](#):
>
> In short, to embed asciicast with id 123 you insert \<script type=“text/javascript” src=“[https://asciinema.org/a/123.js](https://asciinema.org/a/123.js)” id=“asciicast-123” async\>\</script\> in the markup where you want the player to show up.

There lies the problem I faced, Discourse removes most script tags automatically so the player won’t show up at all ☹

(This post includes an [asciinema embed](https://meta.discourse.org/raw/20786/11) yet it doesn’t show up)

---

<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: [December 24, 2014, 6:34pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/12 "2014-12-24T18:34:32Z")

</div>

Well, the sanitization would look like this:

```js
Discourse.Markdown.whiteListTag('script', 'type', 'text/javascript');
Discourse.Markdown.whiteListTag('script', 'src', /https:\/\/asciinema.org\/a\/\d+.js/);
Discourse.Markdown.whiteListTag('script', 'async');

```

Then you just need to write Ruby onebox code to generate that script tag.

---

<div class="post-metadata">

### Author: ![Moter8](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moter8/32/120941_2.png) [@Moter8](https://meta.discourse.org/u/Moter8)
#### Post date: [January 14, 2015, 9:55pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/13 "2015-01-14T21:55:32Z")

</div>

Thanks, I will try and get an asciinema onebox up and going. Setting up ruby already was a pain though, eh ☹

---

<div class="post-metadata">

### Author: ![Moter8](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moter8/32/120941_2.png) [@Moter8](https://meta.discourse.org/u/Moter8)
#### Post date: [January 16, 2015, 10:45am UTC](https://meta.discourse.org/t/asciinema-embedding/20786/14 "2015-01-16T10:45:39Z")

</div>

I’ve tried adding this, be wary that I’m a total newbie to Ruby though. I’d appreciate any comments!

[https://github.com/Moter8/onebox/commits/asciinema-onebox](https://github.com/Moter8/onebox/commits/asciinema-onebox)

---

<div class="post-metadata">

### Author: ![laks](https://avatars.discourse-cdn.com/v4/letter/l/f1d935/32.png) [@laks](https://meta.discourse.org/u/laks)
#### Post date: [December 11, 2015, 9:07pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/15 "2015-12-11T21:07:34Z")

</div>

Sorry to bring up this old post. I spend last 4-5 hrs trying to embed asciinema within discourse - create plugin with whitelisted tags.

> Discourse.Markdown.whiteListTag(‘script’, ‘type’, ‘text/javascript’);  
> Discourse.Markdown.whiteListTag(‘script’, ‘src’, /https://asciinema.org/a/\d+.js/);  
> Discourse.Markdown.whiteListTag(‘script’, ‘id’, ‘\*’);  
> Discourse.Markdown.whiteListTag(‘script’, ‘async’);

I misunderstood something here and still unable to resolve this. Any one succeeded in embedding Asciinema ? Thanks for any help or pointers!

---

<div class="post-metadata">

### Author: ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)
#### Post date: [December 30, 2016, 4:46pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/16 "2016-12-30T16:46:39Z")

</div>

No progress in here? That’s a pitty!

Forum users should not be required to post the code to embed the asciicast, but should be required to post the link on a single line which in turn would be expended using onebox to the asciiicast-embed automatically. This is how it works for links to google maps, wikipedia, etc.

---

<div class="post-metadata">

### Author: ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)
#### Post date: [December 30, 2016, 5:46pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/17 "2016-12-30T17:46:42Z")

</div>

[https://github.com/discourse/onebox/pull/335](https://github.com/discourse/onebox/pull/335)

FYI: asciinema also supports oEmbed and posting a link creates currently as well a onebox that offers a previewimage, the description text and links to the asciinema website. The pull request changes the behaviour to embed the interactive asciinema right in the discourse post.

---

<div class="post-metadata">

### Author: ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)
#### Post date: [February 17, 2017, 10:53am UTC](https://meta.discourse.org/t/asciinema-embedding/20786/18 "2017-02-17T10:53:50Z")

</div>

Anyone gave it a try?

[https://asciinema.org/a/13mx8ojuwulkye579zqmeszc2](https://asciinema.org/a/13mx8ojuwulkye579zqmeszc2)

 ![](https://global.discourse-cdn.com/meta/original/3X/c/9/c90a76f63210a6800ecc105429fb2eab85fbfc3f.png)

Preview is working, but not the embed. ☹

Code:

> <https://github.com/discourse/onebox/blob/main/lib/onebox/engine/asciinema_onebox.rb#L11>

Looks like the `script` tag gets stripped.

---

<div class="post-metadata">

### Author: ![rriemann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rriemann/32/115238_2.png) [@rriemann](https://meta.discourse.org/u/rriemann)
#### Post date: [February 24, 2017, 12:24pm UTC](https://meta.discourse.org/t/asciinema-embedding/20786/19 "2017-02-24T12:24:41Z")

</div>

@sickill, would it be possible to provide next to the asciinema embed using a script tag another, alternative mean using an iframe? This is how e.g. Google Maps are embedded.

The current situation is a broken onebox. ☹

---

<div class="post-metadata">

### Author: ![sickill](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sickill/32/120788_2.png) [@sickill](https://meta.discourse.org/u/sickill)
#### Post date: [February 27, 2017, 10:23am UTC](https://meta.discourse.org/t/asciinema-embedding/20786/20 "2017-02-27T10:23:44Z")

</div>

@rriemann What would be needed? Are you talking about a bare (no layout) page with the player that you would open in an iframe? If so, then [asciinema.org](http://asciinema.org) itself uses one: [https://asciinema.org/api/asciicasts/20055](https://asciinema.org/api/asciicasts/20055) (instead of “/a/” there’s “/api/asciicasts/”). It’s not really a public API atm but I could make it so if bare player page is what you need.

The thing with iframe and asciinema player is the following: every recording has different width/height (columns/rows) and the player doesn’t scale fonts down (because it would be unreadable), so in order for the whole terminal to be visible the iframe has to be resized after the player loads. So, to have the proper size (corresponding to the player inside), the page in iframe sends a message to parent page with exact width/height in pixels so the parent page can resize the iframe. See here: [asciinema-server/app/views/api/asciicasts/show.html.slim at 7250aaca1cc739bf53de9c3e804dbe6a431b4ef2 · asciinema/asciinema-server · GitHub](https://github.com/asciinema/asciinema.org/blob/7250aaca1cc739bf53de9c3e804dbe6a431b4ef2/app/views/api/asciicasts/show.html.slim#L11-L16)

Let me know if this what could potentially be useful. If not we’ll find another way.

[Next page](https://meta.discourse.org/t/asciinema-embedding/20786.md?page=2)