diff --git a/public/assets/my.js b/public/assets/my.js
index ec5c9ae..1031d28 100644
--- a/public/assets/my.js
+++ b/public/assets/my.js
@@ -294,7 +294,9 @@
       if (!items.length) { el.innerHTML = '<p class="muted small">Training materials are being added. Check back soon.</p>'; return; }
       el.innerHTML = items.map(it => {
         const isVid = it.videoUrl && /\.(mp4|webm)(\?|$)/i.test(it.videoUrl);
-        const media = isVid ? '<video src="' + esc(it.videoUrl) + '" controls playsinline style="width:100%;max-width:640px;border-radius:12px;background:#000"></video>' : '';
+        // poster: the admin list can carry one; otherwise assume a .jpg next to the .mp4 (the pipeline uploads both)
+        const poster = it.posterUrl || (isVid ? it.videoUrl.replace(/\.(mp4|webm)(\?.*)?$/i, '.jpg$2') : '');
+        const media = isVid ? '<video src="' + esc(it.videoUrl) + '"' + (poster ? ' poster="' + esc(poster) + '"' : '') + ' preload="metadata" controls playsinline style="width:100%;max-width:640px;border-radius:12px;background:#000"></video>' : '';
         const links = [];
         if (it.videoUrl && !isVid) links.push('<a class="btn small sec" href="' + esc(it.videoUrl) + '" target="_blank" rel="noopener">Watch</a>');
         if (it.docUrl) links.push('<a class="btn small sec" href="' + esc(it.docUrl) + '" target="_blank" rel="noopener">Open material</a>');