index.html

<style>
  body {
    background-color: #f0f0f0;
  }
  
  figure {
    margin: 1em 0;
    text-align: center;
  }
  
  figcaption {
    font-weight: bold;
    margin-bottom: 0.5em;
  }
  
  video {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 100%;
    max-width: 500px;
  }
  </style>
  
  <figure>
    <figcaption><a href="https://github.com/markNZed/codespaces-manim/raw/main/src/notebook/media/videos/notebook/480p30/ImpredicativityAnimation.mp4">Impredicativity Animation</a></figcaption>
    <video controls>
      <source src="https://github.com/markNZed/codespaces-manim/raw/main/src/notebook/media/videos/notebook/480p30/ImpredicativityAnimation.mp4" type="video/mp4" />
      <p>Your browser doesn't support HTML5 video. Here is a <a href="https://github.com/markNZed/codespaces-manim/raw/main/src/notebook/media/videos/notebook/480p30/ImpredicativityAnimation.mp4">link to the video</a> instead.</p>
    </video>
  </figure>
  
  <figure>
    <figcaption><a href="https://github.com/markNZed/codespaces-manim/raw/main/src/notebook/media/videos/notebook/480p10/processism.mp4">Processism</a></figcaption>
    <video controls>
      <source src="https://github.com/markNZed/codespaces-manim/raw/main/src/notebook/media/videos/notebook/480p10/processism.mp4" type="video/mp4" />
      <p>Your browser doesn't support HTML5 video. Here is a <a href="https://github.com/markNZed/codespaces-manim/raw/main/src/notebook/media/videos/notebook/480p10/processism.mp4">link to the video</a> instead.</p>
    </video>
  </figure>