diff --git a/templates/assets/js/index.js b/templates/assets/js/index.js
index 34889ab..ac4851d 100644
--- a/templates/assets/js/index.js
+++ b/templates/assets/js/index.js
@@ -85,3 +85,41 @@ function hide(target){
 document.addEventListener("htmx:afterOnLoad", function (event) {
  // console.log("Réponse du serveur :", event.detail.xhr.responseText);
 });
+
+document.body.addEventListener('click', function(e) {
+  // Play
+  const playBtn = e.target.closest('.js-play-btn');
+  if (playBtn) {
+    const detailBlock = document.getElementById('detail-block');
+    const playerBlock = document.querySelector('.js-player-block');
+    const video = document.getElementById('hls-video');
+    const url = playBtn.dataset.hlsurl;
+
+    detailBlock.style.display = 'none';
+    playerBlock.style.display = 'block';
+
+    if (Hls.isSupported()) {
+      const hls = new Hls();
+      hls.loadSource(url);
+      hls.attachMedia(video);
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      video.src = url;
+    } else {
+      console.error('HLS non supporté');
+    }
+    return;
+  }
+
+  // Fermer
+  const closeBtn = e.target.closest('.js-close-btn');
+  if (closeBtn) {
+    const detailBlock = document.getElementById('detail-block');
+    const playerBlock = document.querySelector('.js-player-block');
+    const video = document.getElementById('hls-video');
+
+    video.pause();
+    video.src = '';
+    playerBlock.style.display = 'none';
+    detailBlock.style.display = 'block';
+  }
+});
diff --git a/templates/media_detail.pages.tmpl b/templates/media_detail.pages.tmpl
index 9a4bd85..5b252e6 100644
--- a/templates/media_detail.pages.tmpl
+++ b/templates/media_detail.pages.tmpl
@@ -2,7 +2,7 @@
   <div class="container">
     <div class="box">
 
-      <!-- Détail avant lecture -->
+      <!-- Bloc détail -->
       <div id="detail-block">
         <div class="columns is-vcentered">
           <div class="column is-one-third">
@@ -14,7 +14,7 @@
             <h1 class="title">{{.item.Title}}</h1>
             {{with .item.Summary}}<p class="content">{{.}}</p>{{end}}
             {{with .item.DurationFmt}}<p class="subtitle is-6">Durée : {{.}}</p>{{end}}
-            <button id="play-btn" class="button is-primary">
+            <button class="button is-primary js-play-btn" data-hlsurl="{{.item.HLSURL}}">
               <span class="icon"><i class="fas fa-play"></i></span>
               <span>Play</span>
             </button>
@@ -22,53 +22,15 @@
         </div>
       </div>
 
-      <!-- Player après clic -->
-      <div id="player-block" style="display:none;">
-        <div class="box">
-          <video id="video-player" controls autoplay style="width:100%; height:auto;"></video>
-          <button id="close-btn" class="button is-light mt-4">
-            <span class="icon"><i class="fas fa-times"></i></span>
-            <span>Fermer</span>
-          </button>
-        </div>
+      <!-- Bloc player -->
+      <div class="box js-player-block" style="display:none;">
+        <video id="hls-video" controls autoplay style="width:100%; height:auto;"></video>
+        <button class="button is-light mt-4 js-close-btn">
+          <span class="icon"><i class="fas fa-times"></i></span>
+          <span>Fermer</span>
+        </button>
       </div>
 
     </div>
   </div>
 </section>
-
-<script src="https://unpkg.com/hls.js@1.4.0"></script>
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    var playBtn = document.getElementById('play-btn');
-    var closeBtn = document.getElementById('close-btn');
-    var detailBlock = document.getElementById('detail-block');
-    var playerBlock = document.getElementById('player-block');
-    var video = document.getElementById('video-player');
-
-    playBtn.addEventListener('click', function() {
-      detailBlock.style.display = 'none';
-      playerBlock.style.display = 'block';
-      var url = "{{.item.HLSURL}}";
-      if (Hls.isSupported()) {
-        var hls = new Hls();
-        hls.loadSource(url);
-        hls.attachMedia(video);
-      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = url;
-      } else {
-        console.error('HLS non supporté');
-      }
-      playBtn.style.display = 'none';
-    });
-
-    closeBtn.addEventListener('click', function() {
-      if (!video.paused) video.pause();
-      video.src = '';
-      playerBlock.style.display = 'none';
-      detailBlock.style.display = 'block';
-      playBtn.style.display = 'inline-flex';
-    });
-  });
-</script>
-