diff --git a/api/templates/admin.html.tera b/api/templates/admin.html.tera
index 9e92ce5..9cfcce6 100644
--- a/api/templates/admin.html.tera
+++ b/api/templates/admin.html.tera
@@ -57,10 +57,6 @@
 				<p>Video file name: <code id="vmn"></code></p>
 				<p>Video file size: <code id="vms"></code></p>
 				<p>Video file type: <code id="vmt"></code></p>
-
-				<video id="hidden-video" hidden>
-				<canvas id="thumbnail">
-				<img id="preview">
 			</div>
 		</div>
 	</div>
diff --git a/api/templates/video.html.tera b/api/templates/video.html.tera
index 9c831a7..6affbda 100644
--- a/api/templates/video.html.tera
+++ b/api/templates/video.html.tera
@@ -8,6 +8,11 @@
 	<title>{{title}}</title>
 	<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
 
+	{# Required for a better video player #}
+	<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
+	<script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
+
+
 	{# Opengraph tags #}
 	<meta property="og:title" content="{{title}}">
 	<meta property="og:site_name" content="Clippable">
@@ -27,8 +32,8 @@
 	<div class="content">
 		{% include "navbar" %}
 		<h1>{{title}}</h1>
-		<video width="1280" height="720" controls autoplay>
-			<source src="{{clip_url}}" type="">
+		<video width="1280" height="720" class="video-js" controls autoplay>
+			<source src="{{clip_url}}">
 			wtf get a better browser 1d10t
 		</video>
 	</div>
diff --git a/ts/admin.ts b/ts/admin.ts
index 11dd244..22d7fd9 100644
--- a/ts/admin.ts
+++ b/ts/admin.ts
@@ -59,7 +59,7 @@ function populate_meta_form() {
 		document.getElementById('vms').textContent = `${size} MB`
 		document.getElementById('vmt').textContent = `${file.files[0].type}`
 
-		document.getElementById('video-meta').hidden = false
+		document.getElementById('video-meta').hidden = false 
 	}
 }