docs: add presentation recording preview

Author: danielsanjosepro

docs/index.md

@@ -10,6 +10,18 @@ hide:
 # CRISP - **C**ompliant **R**OS2 Controllers for Learn**i**ng-Ba**s**ed Manipulation **P**olicies
 
 *Authors: [Daniel San Jose Pro](https://danielsanjosepro.github.io)[^1], [Oliver Hausdörfer](https://oliver.hausdoerfer.de/)[^1], [Ralf Römer](https://ralfroemer99.github.io)[^1], Maximilian Dösch[^1], [Martin Schuck](https://amacati.github.io/) [^1] and [Angela P. Schoellig](https://www.ce.cit.tum.de/lsy/prof-angela-schoellig/) [^1]*.
+
+<div class="presentation-info">
+  <div class="presentation-info__text">
+    <p>View the <a href="slides/index.html">CRISP presentation slides</a>: <em>Compliant ROS2 Controllers for Learning-Based Manipulation Policies</em> (IEEE RA-P 2026).</p>
+    <p>Watch the <a href="https://youtu.be/WQd2eTBQQ40?si=GnNO7UqwXHmSJ0eu">presentation recording from the Robot Learning Munich Paper Club</a>.</p>
+  </div>
+  <div class="presentation-info__preview">
+    <iframe class="presentation-info__iframe" src="https://www.youtube-nocookie.com/embed/WQd2eTBQQ40?autoplay=1&mute=1&controls=0&loop=1&playlist=WQd2eTBQQ40&modestbranding=1&playsinline=1&rel=0&start=60" data-video-id="WQd2eTBQQ40" data-start-times="60,240,420,660,900,1140,1380" title="CRISP presentation recording preview" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
+    <a class="presentation-info__preview-link" href="https://youtu.be/WQd2eTBQQ40?si=GnNO7UqwXHmSJ0eu" aria-label="Watch the CRISP presentation recording on YouTube"></a>
+  </div>
+</div>
+
 [^1]: The authors are with Technical University of Munich, Germany; TUM School of Computation, Information and Technology, Department of Computer Engineering, Learning Systems and Robotics Lab; Munich Institute of Robotics and Machine Intelligence; and the Robotics Institute Germany.
 
 You want to deploy your learning-based policy to your manipulator, or collect teleoperation data? `CRISP` provides the tools for that.
@@ -22,10 +34,6 @@ _If you use this work, please cite it using the [bibtex](#citing) below._
 
 Check the [controllers (CRISP controllers) :simple-github:](https://github.com/utiasDSL/crisp_controllers), the simple [python interface (crisp_py) :simple-github:](https://github.com/utiasDSL/crisp_py), and a [Gymnasium wrapper (crisp_gym) :simple-github:](https://github.com/utiasDSL/crisp_gym) for real-world experiments.
 
-
-!!! info "Presentation slides"
-    View the [CRISP presentation slides](slides/index.html) — *Compliant ROS2 Controllers for Learning-Based Manipulation Policies* (IEEE RA-P 2026). Best on a laptop; on a phone, turn it sideways.
-
 !!! info "Aloha gripper for Manipulators"
     Check out [aloha4franka](https://tum-lsy.github.io/aloha4franka/) for the gripper used in the videos.
 

docs/javascripts/presentation-preview.js

@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const previews = document.querySelectorAll('.presentation-info__iframe[data-video-id][data-start-times]');
+
+  previews.forEach((preview) => {
+    const videoId = preview.dataset.videoId;
+    const startTimes = preview.dataset.startTimes
+      .split(',')
+      .map((time) => Number.parseInt(time.trim(), 10))
+      .filter(Number.isFinite);
+
+    if (!videoId || startTimes.length === 0) {
+      return;
+    }
+
+    const start = startTimes[Math.floor(Math.random() * startTimes.length)];
+    const params = new URLSearchParams({
+      autoplay: '1',
+      mute: '1',
+      controls: '0',
+      loop: '1',
+      playlist: videoId,
+      modestbranding: '1',
+      playsinline: '1',
+      rel: '0',
+      start: String(start),
+    });
+
+    preview.src = `https://www.youtube-nocookie.com/embed/${videoId}?${params.toString()}`;
+  });
+});

docs/slides/index.html

@@ -371,6 +371,7 @@
     background: var(--paper-hi);
     box-shadow: 4px 4px 0 rgba(32,170,150,.16);
 }
+.badge img { display:block; height:20px; width:auto; }
 .card {
     background: rgba(251,249,241,.72);
     border: 1.5px solid #000;
@@ -1420,7 +1421,7 @@
       <h1 class="reveal d1" data-editable="true">Compliant ROS2 Controllers for Learning-Based Manipulation Policies</h1>
       <p class="reveal d2" style="margin:18px 0 0; font-family:var(--font-mono); font-size:40px; letter-spacing:.02em; color:var(--muted);" data-editable="true">Daniel San José Pro</p>
       <p class="reveal d2" style="margin:10px 0 0; font-family:var(--font-mono); font-size:13px; line-height:1.45; letter-spacing:.01em; color:var(--muted); max-width:900px;" data-editable="true">with Oliver, Ivan Domrachev, Nabil Miri, niklasschlueter, David Alexander, Vidullan, Veit Gemmer, Maximilian Dösch, Johannes Sautier, Ralf Römer, Linus Schwarz, Lev Kozlov, Luka Hofer, AlexD &amp; Bence Magyar</p>
-      <div class="badge-row title-badges reveal d3"><span class="badge">★222</span><span class="badge">IEEE RAP 2026</span></div>
+      <div class="badge-row title-badges reveal d3"><span class="badge"><img src="https://img.shields.io/github/stars/utiasDSL/crisp_controllers?style=social" alt="GitHub stars for utiasDSL/crisp_controllers"></span><span class="badge">IEEE RAP 2026</span></div>
       <div class="qr-card reveal d3" aria-label="Project QR code">
         <img src="assets/presentation/crisp-qr.svg" alt="QR code linking to the CRISP Controllers project page">
         <span class="qr-caption">learnsyslab.github.io/crisp_controllers</span>

docs/stylesheets/extra.css

@@ -59,6 +59,56 @@
   color: #008000; /* green */
 }
 
+.presentation-info {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin: 1.25rem 0;
+  padding: 1rem;
+  border: 1px solid var(--md-primary-fg-color);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
+}
+
+.presentation-info__text {
+  flex: 1 1 auto;
+}
+
+.presentation-info__preview {
+  position: relative;
+  flex: 0 0 220px;
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  background: #000;
+}
+
+.presentation-info__preview iframe {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  display: block;
+  border: 0;
+  pointer-events: none;
+}
+
+.presentation-info__preview-link {
+  position: absolute;
+  inset: 0;
+  display: block;
+}
+
+@media (max-width: 600px) {
+  .presentation-info {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .presentation-info__preview {
+    flex-basis: auto;
+    max-width: 220px;
+  }
+}
+
 /* Carousel Styles */
 .carousel-container {
   position: relative;

zensical.toml

@@ -38,6 +38,7 @@ extra_css = [
 ]
 extra_javascript = [
   "javascripts/carousel.js",
+  "javascripts/presentation-preview.js",
   # "javascripts/katex.js",
   # "https://unpkg.com/katex@0/dist/katex.min.js",
   # "https://unpkg.com/katex@0/dist/contrib/auto-render.min.js",