locked video aspect ratio to 16:9

public/assets/css/general.css

@@ -500,6 +500,7 @@ table {
 }
 
 #video-player {
+	background-color: black;
 	cursor: pointer;
 }
 

views/partials/asset.handlebars

@@ -6,11 +6,21 @@
             Your browser does not support the <code>video</code> element.
         </video>
     {{else}}
-        <video id="video-player" class="video-show" controls poster="{{fileInfo.thumbnail}}">
+
+            <video id="video-player" class="video-show video" controls poster="{{fileInfo.thumbnail}}">
                 <source src="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
                 {{!--fallback--}}
                 Your browser does not support the <code>video</code> element.
             </video>
+            <script type="text/javascript">
+                document.addEventListener('DOMContentLoaded', resizeVideoPlayer)
+                window.addEventListener("resize", resizeVideoPlayer);
+                function resizeVideoPlayer() {
+                    const div = document.getElementById('video-player');
+                    const width = div.offsetWidth;
+                    div.height = (width * 9 / 16);
+                }
+            </script>
     {{/ifConditional}}
 {{else}}
     <a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">

views/partials/assetInfo.handlebars

@@ -1,6 +1,8 @@
+{{#if fileInfo.description}}
 <div class="row row--wide row--short">
     <p class="label">{{fileInfo.description}}</p>
 </div>
+{{/if}}
 
 <div class="row row--wide">
     <div id="show-short-link">

views/show.handlebars

@@ -3,7 +3,7 @@
         <!-- title -->
         <span class="title-show">{{fileInfo.title}}</span>
     </div>
-    <div class="column column--5 column--med-10 align-content-top" >
+    <div class="column column--5 column--med-10 align-content-top">
         <!-- asset -->
         <div class="row">
             {{> asset}}