diff --git a/roles/nginx-rtmp/files/index.html b/roles/nginx-rtmp/files/index.html
new file mode 100644
index 00000000..3f0323cc
--- /dev/null
+++ b/roles/nginx-rtmp/files/index.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Crans Stream</title>
+  <link href="lib/bootstrap4/css/bootstrap.min.css" rel="stylesheet">
+  <link href="//unpkg.com/video.js@7/dist/video-js.min.css" rel="stylesheet">
+  <style>
+  body, html {
+    height: 100%;
+  }
+  .video-js .vjs-big-play-button {
+    display: none;
+  }
+  </style>
+</head>
+<body class="bg-dark">
+  <div class="container h-100 p-3">
+      <div class="row align-items-center h-100">
+        <div class="col-12">
+          <video id="my-video" class="video-js embed-responsive shadow-lg rounded-sm"></video>
+          <p class="text-right text-white">
+            <a class="text-white text-decoration-none" href="#" id="linkStream">Ouvrir le flux dans une application externe</a>
+            —
+            <a class="text-white text-decoration-none" href="#aboutModal" data-toggle="modal">À propos</a>
+          </p>
+        </div>
+      </div>
+  </div>
+
+  <div class="modal fade" id="aboutModal" tabindex="-1">
+    <div class="modal-dialog-centered modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title" id="exampleModalLabel">À propos</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p>Crans Stream est un service maintenu par le <a href="https://crans.org/">Crans</a> permettant de diffuser un contenu vidéo. Il a pour but d'être utilisé pour diffuser des séminaires ou évènements.</p>
+
+          <h4>Comment je diffuse ?</h4>
+          <p>Pour diffuser un contenu vous devez être adhérent Crans et être sur le campus de Cachan.</p>
+          <h5>Avec Open Broadcaster Software</h5>
+          <p>
+            <a href="https://obsproject.com/">Open Broadcaster Software (OBS)</a>
+            est une solution libre et open source de diffusion vidéo.
+            Pour diffuser sur cette plateforme, allez dans l'onglet « Stream (flux) » des paramètres :
+          </p> 
+          <ul>
+            <li><b>Serveur :</b> <code>rtmp://stream.adm.crans.org/live</code>,</li>
+            <li><b>Clé de stream :</b> votre identifiant.</li>
+          </ul>
+          <h5>Avec FFmpeg</h5>
+          <p>
+            <code>
+              ffmpeg -re -i mavideo.webm -vcodec libx264 -vprofile baseline
+              -acodec aac -strict -2 -f flv
+              rtmp://stream.adm.crans.org/live/identifiant
+            </code>
+          </p>
+
+          <h4>Mentions légales</h4>
+          <p>
+            Le service de diffusion vidéo du Crans est un service d'hébergement
+            au sens de l'article 6, I, 2e de la loi 2004-575 du 21 juin 2004.
+            Conformément aux dispositions de l'article 6, II du même,
+            l'association Crans conserve les données de nature à permettre
+            l'identification des auteurs du contenu diffusé.
+            Ce service est hébergé par l'association Crans, au
+            61 Avenue du Président Wilson, 94235 Cachan Cedex, France.
+          </p>
+          <p>
+            <b>En cas de réclamation sur le contenu diffusé</b> de type
+            <code>https://stream.crans.org/identifiant</code>,
+            l'auteur peut être contacté par courrier à l'adresse
+            <code>identifiant@crans.org</code>.
+            La loi vous autorise à contacter directement l'hébergeur à
+            l'adresse suivante :
+            <pre>Association Crans - ENS Paris-Saclay<br/>Notification de Contenus Illicites<br/>61, Avenue du Président Wilson<br/>94235 Cachan Cedex<br/>France</pre>
+            Vous pouvez également envoyer directement vos réclamations par
+            courrier électronique à l'adresse <code>bureau[at]crans.org</code>.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="lib/jquery/jquery.min.js"></script>
+  <script src="lib/bootstrap4/js/bootstrap.min.js"></script>
+  <script src="//unpkg.com/video.js@7/dist/video.min.js"></script>
+  <script>
+  // Get current stream
+  let streamId = window.location.pathname.split("/").pop()
+  if (streamId.length === 0) {
+    streamId = "crans"  // default on crans account
+  }
+  const streamUrl = `/hls/${streamId}.m3u8`
+  document.getElementById("linkStream").href = streamUrl
+
+  // If stream exists, then load
+  const player = videojs('my-video', {
+    controls: true,
+    autoplay: true,
+    preload: 'auto',
+    muted: true,
+    fluid: true,
+    aspectRatio: '16:9'
+  })
+
+  fetch(streamUrl, {
+    method: 'HEAD',
+    cache: 'no-cache'
+  }).then((response) => {
+    if (response.ok) {
+      // Stream exists, load!
+      player.src({
+        type: 'application/x-mpegURL',
+        src: streamUrl
+      });
+    } else {
+      // Stream does not exist, alert!
+      player.poster('/no-stream.jpg')
+    }
+  });
+  </script>
+</body>
+</html>
diff --git a/roles/nginx-rtmp/files/no-stream.jpg b/roles/nginx-rtmp/files/no-stream.jpg
new file mode 100644
index 00000000..af44c5a4
Binary files /dev/null and b/roles/nginx-rtmp/files/no-stream.jpg differ
diff --git a/roles/nginx-rtmp/tasks/main.yml b/roles/nginx-rtmp/tasks/main.yml
index 68438fd2..c1e61bfd 100644
--- a/roles/nginx-rtmp/tasks/main.yml
+++ b/roles/nginx-rtmp/tasks/main.yml
@@ -5,6 +5,7 @@
     name:
       - nginx-full
       - libnginx-mod-rtmp
+      - libjs-bootstrap4
   register: apt_result
   retries: 3
   until: apt_result is succeeded
@@ -12,24 +13,24 @@
 
 - name: Copy module and site configuration files
   template:
-    src: '{{ item }}.j2'
-    dest: '/etc/{{ item }}'
+    src: "{{ item }}.j2"
+    dest: "/etc/{{ item }}"
   loop:
     - nginx/modules-available/60-rtmp.conf
     - nginx/sites-available/stream
   notify: restart nginx
 
-- name: Enable site
+- name: Enable NGINX site
   file:
-    src: '/etc/nginx/sites-available/stream'
-    dest: '/etc/nginx/sites-enabled/stream'
+    src: /etc/nginx/sites-available/stream
+    dest: /etc/nginx/sites-enabled/stream
     state: link
   notify: restart nginx
 
-- name: Enable module
+- name: Enable RTMP module
   file:
-    src: '/etc/nginx/modules-available/60-rtmp.conf'
-    dest: '/etc/nginx/modules-enabled/60-rtmp.conf'
+    src: /etc/nginx/modules-available/60-rtmp.conf
+    dest: /etc/nginx/modules-enabled/60-rtmp.conf
     state: link
   notify: restart nginx
 
@@ -38,7 +39,16 @@
     path: /var/www/stream/hls
     state: directory
 
-- name: Copy index configuration file
-  template:
-    src: index.html
-    dest: /var/www/stream/
+- name: Copy index.html and assets
+  copy:
+    src: "{{ item }}"
+    dest: "/var/www/stream/{{ item }}"
+  loop:
+    - index.html
+    - no-stream.jpg
+
+- name: Link javascript libs
+  file:
+    src: /usr/share/javascript
+    dest: /var/www/stream/lib
+    state: link
diff --git a/roles/nginx-rtmp/templates/index.html b/roles/nginx-rtmp/templates/index.html
deleted file mode 100644
index 609aa9dd..00000000
--- a/roles/nginx-rtmp/templates/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="UTF-8">
-  <title>Crans Live</title>
-  <link href="//unpkg.com/bootstrap@4.5/dist/css/bootstrap.min.css" rel="stylesheet">
-  <link href="//unpkg.com/video.js@7/dist/video-js.min.css" rel="stylesheet">
-</head>
-<body class="bg-dark m-2">
-  <div class="container">
-    <video id="my-video" class="video-js embed-responsive embed-responsive-16by9 shadow-lg rounded-sm"></video>
-    <a class="text-white text-decoration-none" href="#" id="linkStream">Ouvrir le flux dans une application externe</a>
-  </div>
-
-  <script src="//unpkg.com/video.js@7/dist/video.min.js"></script>
-  <script>
-  const videoId = window.location.pathname.split("/").pop()
-  document.getElementById("linkStream").href = `/hls/${videoId}.m3u8`
-  videojs('my-video', {
-    controls: true,
-    autoplay: true,
-    preload: 'auto',
-    muted: true,
-    fluid: true,
-    aspectRatio: '16:9'
-  }).src({
-    type: 'application/x-mpegURL',
-    src: `/hls/${videoId}.m3u8`
-  });
-  </script>
-</body>
-</html>
