diff --git a/index.html b/index.html
index ffc6eac..94d06e5 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>NARROWCAST</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
   <link rel="stylesheet" type="text/css" media="all" href="narrowstyle.css"></link>
 </head>
 <body>
@@ -76,6 +77,19 @@
       </video> 
     -->
 
+    <video
+      id="player"
+      class="video-js vjs-default-skin"
+      height="360"
+      width="640"
+      controls
+      preload="none"
+    >
+      <source
+        src="https://video.vvvvvvaria.org/test.m3u8"
+        type="application/x-mpegURL"
+      />
+    </video>
 
     <p class="note"> * move and resize the elements above by dragging their corners / sides and click on the page to set the position *</p>
 
@@ -146,7 +160,10 @@ function dragMoveListener (event) {
     target.setAttribute('data-y', y);
   }
 </script>
-
+<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
+<script>
+  var player = videojs("#player");
+</script>
 
 </body>
 </html>
