diff --git a/web/css/tempic-front.css b/web/css/tempic-front.css
index a1b741f..7730303 100644
--- a/web/css/tempic-front.css
+++ b/web/css/tempic-front.css
@@ -199,3 +199,39 @@ progress {
 @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
 @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
 @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
+@media (min-width: 768px) {
+	.modal-xl {
+		width: 90%;
+		max-width:1200px;
+	}
+}
+
+.video-dialog {
+	height: 100%;
+}
+
+.video-container {
+	height: 80%;
+	display: flex;
+	flex-direction: column;
+}
+
+.video-header {
+	border-bottom: none;
+}
+
+.video-body {
+	/*position: absolute;
+	bottom: 0;
+	height: 80%;*/
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+
+video {
+	height: 100%;
+}
\ No newline at end of file
diff --git a/web/index.php b/web/index.php
index 32f6473..cc9a334 100644
--- a/web/index.php
+++ b/web/index.php
@@ -330,6 +330,19 @@
 								</div>
 							</div>
 						</div>
+						
+						<div class="modal fade" id="modal_video" tabindex="-1" role="dialog" aria-labelledby="label_modal_video">
+							<div class="modal-dialog modal-lg modal-xl video-dialog" role="document">
+								<div class="modal-content video-container">
+									<div class="modal-header video-header">
+										<button type="button" class="close" data-dismiss="modal_video" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+									</div>
+									<div class="modal-body video-body" id="body_modal_video">
+										<video id="video"></video>
+									</div>
+								</div>
+							</div>
+						</div>
 
 						<?php $count = 0; ?>
 						<?php foreach ($files as $name => $file) : ?>
@@ -343,7 +356,7 @@
 									<?php else: ?>
 										<div class="panel panel-default">
 											<div class="panel-body">
-												<a href="<?php echo $file['url']; ?>">
+												<!--<a href="<?php echo $file['url']; ?>">-->
 													<?php $file_ext_icon = URL_BASE . '/img/filetypes/'
 															. (!empty($file['extension']) && file_exists('img/filetypes/' . $file['extension'] . '.png')
 															? $file['extension'] : '_blank') . '.png';
@@ -353,12 +366,25 @@
 															onerror="onThumbnailError(this);" onload="onThumbnailLoad(this);">
 													<?php elseif ($file['image']) : ?>
 														<img src="<?php echo $file['url']; ?>" alt="Uploaded Image" class="thumbnail img-responsive">
+													<?php elseif (!empty($file['extension']) && $file['extension'] == "webm") : ?>
+														<!--<div id="video-toggle" type="button" data-toggle="modal" data-target="#modal_video">-->
+														<script>
+															function playVideo (url) {
+																$('#modal_video').modal('show');
+																var video = $('#video');
+																video.attr('src', url);
+																//video.attr('autoPlay', 'true');
+															}
+														</script>
+														<div onclick="playVideo('<?php echo $file['url']; ?>')">
+															<img src="<?php echo $file_ext_icon; ?>" alt="Uploaded File" class="img-responsive">
+														</div>
 													<?php else: ?>
 														<img src="<?php echo $file_ext_icon; ?>" alt="Uploaded File" class="img-responsive">
 													<?php endif; ?>
 
 													<p><?php echo htmlspecialchars($name); ?></p>
-												</a>
+												<!--</a>-->
 												<pre class="checksum-field"><?php
 													if (empty($file['checksums']))
 														echo "Checksums unavailable. Try reloading the page.";