Asciinema + Reveal.js (display issue)

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 (the Asciinema recordings come from https://asciinema.org/)

Do you have any idea?

Hi everyone,

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

Thx

Mickael

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:

Dear Pamela,

Thank you very much for your feedback.

I noticed that your workaround only works on .cast files hosted on 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

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

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