style.html

<link rel="stylesheet" type="text/css" href="./asciinema-player.css" />
<script src="./asciinema-player.js"></script>
<script>
  function ready(fn) {
    if (
      document.attachEvent
        ? document.readyState === "complete"
        : document.readyState !== "loading"
    ) {
      fn();
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  }

  function playAsciinemaOnSlideShown() {
    const slides = document.querySelectorAll("section.slide");

    // Options for the observer (which mutations to observe)
    var config = { attributes: true, childList: true, subtree: true };

    // Callback function to execute when mutations are observed
    const callback = function (mutations) {
      mutations.forEach(function (mutation) {
        if (mutation.type == "attributes") {
          const player = mutation.target.querySelector(
            "asciinema-player, video"
          );
          if (!player) return;
          if (mutation.target.getAttribute("aria-selected") == "true") {
            if (player.resetInterval) clearInterval(player.resetInterval);
            player.play();
          } else {
            player.pause();
            player.resetInterval = setInterval(() => {
              if (player.player) {
                // asciinema
                player.player.setCurrentTime(0);
              } else {
                player.currentTime = 0;
              }
            }, 3000);
          }
        }
      });
    };

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    slides.forEach(slide => observer.observe(slide, config));
    const currentSlide = document.querySelector(
      'section.slide[aria-selected="true"]'
    );
    if (currentSlide) {
      currentSlide.querySelector("asciinema-player, video").play();
    }
  }

  ready(playAsciinemaOnSlideShown);
</script>
<style>
  @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
  @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,
 700,
  400italic);
  @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,
 700,
  400italic);

  .center {
    text-align: center;
  }

  .w10 {
    width: 10%;
  }

  .w15 {
    width: 15%;
  }

  .w20 {
    width: 20%;
  }

  .w25 {
    width: 25%;
  }

  .w30 {
    width: 30%;
  }

  .w35 {
    width: 35%;
  }

  .w40 {
    width: 40%;
  }

  .w50 {
    width: 50%;
  }

  .w60 {
    width: 60%;
  }

  .w70 {
    width: 70%;
  }

  .w75 {
    width: 75%;
  }

  .w80 {
    width: 80%;
  }

  .w90 {
    width: 90%;
  }

  .w100 {
    width: 100%;
  }

  body {
    border-radius: 0;
    /* override */
    counter-reset: page;
  }

  section {
    transition: none;
    /* override */
    font-family: "Droid Serif", serif;
  }

  section.slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-around;
  }

  section a {
    color: inherit;
  }

  h1:not(.title),
  h2,
  h3,
  h4 {
    font-family: "Yanone Kaffeesatz", sans-serif;
    font-weight: normal;
    position: relative;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.7);
    margin: 10pt 0 20pt 0;
    text-align: center;
    line-height: 1.1em;
  }

  h1 {
    font-size: 2.7em;
  }

  h2 {
    font-size: 1.7em;
  }

  h3 {
    font-size: 1.2em;
  }

  h4 {
    font-size: 0.7em;
  }

  div.sourceCode {
    font-family: "Ubuntu Mono", sans-serif;
    background-color: #eee;
    margin: 0 10%;
  }

  section>p:only-of-type {
    margin: 0;
  }

  p {
    text-align: center;
    margin: 50px;
    font-size: 0.9em;
  }

  .slide figure,
  .slide>p>img,
  .slide video {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    margin: 0;
    object-fit: cover;
  }

  .slide>p:only-child>img,
  .slide>video:only-child {
    object-fit: contain;
  }

  .slide>video:only-child {
    background-color: black;
  }

  asciinema-player {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  #progress-bar {
    display: none;
  }

  .pages {
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: gray;
    font-size: 0.8em;
    z-index: 1000;
  }

  .pages::after {
    counter-increment: page;
    content: counter(page) "";
  }

  ol,
  ul {
    margin: 20px auto;
    width: 85%;
  }
</style>