diff --git a/templates/media_detail.pages.tmpl b/templates/media_detail.pages.tmpl
index 73beeec..89f4d0b 100644
--- a/templates/media_detail.pages.tmpl
+++ b/templates/media_detail.pages.tmpl
@@ -1,28 +1,72 @@
 <section class="section">
   <div class="container">
     <div class="box">
-      <div class="columns is-vcentered">
-        <!-- Thumbnail column -->
-        <div class="column is-one-third">
-          <figure class="image is-3by4">
-            <img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" />
-          </figure>
+      <div id="detail-block">
+        <div class="columns is-vcentered">
+          <!-- Thumbnail column -->
+          <div class="column is-one-third">
+            <figure class="image is-3by4">
+              <img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" />
+            </figure>
+          </div>
+          <!-- Details & Play button -->
+          <div class="column">
+            <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">
+              <span class="icon"><i class="fas fa-play"></i></span>
+              <span>Play</span>
+            </button>
+          </div>
         </div>
-        <!-- Details & Play button -->
-        <div class="column">
-          <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 class="button is-primary" onclick="window.open('{{.item.HLSURL}}', '_blank', 'noopener')">
-            <span class="icon"><i class="fas fa-play"></i></span>
-            <span>Play</span>
+      </div>
+      <div id="player-block" style="display:none;">
+        <div class="box">
+          <video id="video-player" controls autoplay style="width:100%; height:auto;">
+            <source src="{{.item.HLSURL}}" type="application/vnd.apple.mpegURL">
+            Votre navigateur ne supporte pas la lecture HLS.
+          </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>
       </div>
     </div>
   </div>
 </section>
+
+<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';
+      if (Hls.isSupported()) {
+        var hls = new Hls();
+        hls.loadSource("{{.item.HLSURL}}");
+        hls.attachMedia(video);
+      } else {
+        video.src = "{{.item.HLSURL}}";
+      }
+    });
+
+    closeBtn.addEventListener('click', function() {
+      if (video.pause) video.pause();
+      playerBlock.style.display = 'none';
+      detailBlock.style.display = 'block';
+      // reset source to stop download
+      video.src = '';
+    });
+  });
+</script>