# Asciinema + Reveal.js (display issue)

**URL:** <https://discourse.asciinema.org/t/asciinema-reveal-js-display-issue/618>\
**Category:** Help\
**Created:** [February 21, 2022, 2:06pm UTC](https://discourse.asciinema.org/t/asciinema-reveal-js-display-issue/618 "2022-02-21T14:06:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mickaelbaron](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.asciinema.org/mickaelbaron/32/355_2.png) [@mickaelbaron](https://discourse.asciinema.org/u/mickaelbaron)\
**Post date:** [February 21, 2022, 2:06pm UTC](https://discourse.asciinema.org/t/asciinema-reveal-js-display-issue/618/1 "2022-02-21T14:06:53Z")

</div>

Hi,

I am writing slides with reveal.js 4 and I would like to integrate at least seven Asciinema recordings. I am using the last version of Ascinema Player (3.0.0 RC1). All Asciinema recordings are hosted by myself.

I have a problem to display all Asciinema recordings. The behaviour is random. Sometimes I have three Asciinema which are displayed, sometimes four, sometimes one… To solve the problem, I need to refresh my browser on the current reveal page where the Asciinema is hidden. When I retrieve the size (width + height) of the Asciinema recordings, the Asciinema recordings that are hidden have a size of zero.

I created a Github repository to reproduce the issue =\> [GitHub - mickaelbaron/revealasciinema](https://github.com/mickaelbaron/revealasciinema) (the Asciinema recordings come from [https://asciinema.org/](https://asciinema.org/))

Do you have any idea?

---

<div class="post-metadata">

**Author:** ![mickaelbaron](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.asciinema.org/mickaelbaron/32/355_2.png) [@mickaelbaron](https://discourse.asciinema.org/u/mickaelbaron)\
**Post date:** [March 4, 2022, 1:42pm UTC](https://discourse.asciinema.org/t/asciinema-reveal-js-display-issue/618/2 "2022-03-04T13:42:03Z")

</div>

Hi everyone,

Any idea for the integration problem of Asciinema and Reveal.js ?

Thx

Mickael

---

<div class="post-metadata">

**Author:** ![pamelafox](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.asciinema.org/pamelafox/32/436_2.png) [@pamelafox](https://discourse.asciinema.org/u/pamelafox)\
**Post date:** [March 15, 2023, 5:52pm UTC](https://discourse.asciinema.org/t/asciinema-reveal-js-display-issue/618/3 "2023-03-15T17:52:50Z")

</div>

I know you asked this a year ago, but I did recently attempt the same thing, and after many workaround attempts, I figured out something that seems to work most of the time.

1. Start with the script embed tag
2. Load slides, inspect element, and copy the HTML of the generated iframe tag
3. Replace the script tag with the iframe tag
4. Change src to data-src on the iframe. That will get Reveal.JS to only load the iframes once the slide is visible, which should mean the player loads at the correct size.

Example in my diff here:

> <https://github.com/pamelafox/my-py-talks/commit/1bad5f9692a73cb60ca326e89d08b267765952c3#diff-8aead46cf4f47ed89a0d0ec84cb23b2d7f170203e18ba2741d60c09491902172L498>

---

<div class="post-metadata">

**Author:** ![mickaelbaron](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.asciinema.org/mickaelbaron/32/355_2.png) [@mickaelbaron](https://discourse.asciinema.org/u/mickaelbaron)\
**Post date:** [March 16, 2023, 9:46am UTC](https://discourse.asciinema.org/t/asciinema-reveal-js-display-issue/618/4 "2023-03-16T09:46:10Z")

</div>

Dear Pamela,

Thank you very much for your feedback.

I noticed that your workaround only works on .cast files hosted on [asciinema.org](http://asciinema.org). In my case, the .cast files are stored in my repository as implemented in your http-apis-workshop directory. But in this directory there is only one .cast file.

Best

Mickael

---

<div class="post-metadata">

**Author:** ![mickaelbaron](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.asciinema.org/mickaelbaron/32/355_2.png) [@mickaelbaron](https://discourse.asciinema.org/u/mickaelbaron)\
**Post date:** [March 16, 2023, 8:57pm UTC](https://discourse.asciinema.org/t/asciinema-reveal-js-display-issue/618/5 "2023-03-16T20:57:47Z")

</div>

Dear Pamela,

I found a workaround in the case where you want to use .cast files.

I commited a new version of my repository =\> [GitHub - mickaelbaron/revealasciinema: A workaround to use together Reveal.js and Asciinema Player](https://github.com/mickaelbaron/revealasciinema)

In my opinion, create all asciinema players all at once, it is not a good idea. With my workaround, I create the asciinema player when the slide is displayed.

Best