public/assets/css/general.css

@@ -501,27 +501,32 @@ table {
 	width: calc(100% - 1rem);
 }
 
-/* Show page */
-
-#video-player {
-   	display: block;
-   	margin: 0 auto;
-    background-color: #fff;
-	cursor: pointer;
-}
-#showlite-body #video-player {
-  	margin-top: 2%;    	
-    padding: 6px;
-    max-width: 50%;
-	border: 1px solid #d0d0d0;
-}
+/* Assets */
 
 .asset {
 	max-width: 100%;
 }
 
-#showlite-body > .asset {
+#show-body #asset-boilerpate {
+	display: none;
+}
+
+#showlite-body #asset-display-component {
 	max-width: 50%;
+	text-align: center;
+}
+
+/* video */
+
+#video-asset {
+    background-color: #fff;
+	cursor: pointer;
+}
+#showlite-body #video-asset {
+	width: calc(100% - 12px - 12px - 2px);
+	margin: 6px;
+	padding: 6px;
+	border: 1px solid #d0d0d0;
 }
 
 /* item lists */

public/assets/css/mediaQueries.css

@@ -36,7 +36,7 @@
 		padding-right: 1.5em;
 	}
 
-	#showlite-body > asset {
+	#showlite-body #asset-display-component {
 		max-width: 100%;
 	}
 

views/partials/asset.handlebars

@@ -9,6 +9,7 @@
             {{> image}}
         {{/ifConditional}}
     </div>
+    <a id="asset-boilerpate" class="link--primary fine-print" href="/{{claimInfo.claimId}}/{{claimInfo.name}}">hosted via Spee&lt;h</a>
 </div>
 
 <script type="text/javascript">
@@ -24,7 +25,7 @@
         },
         showVideo: function () {
             console.log('showing video');
-            const video = document.getElementById('video-player');
+            const video = document.getElementById('video-asset');
             const source = document.createElement('source');
             source.setAttribute('src', '/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}');
             video.appendChild(source);
@@ -32,7 +33,7 @@
         },
         showImage: function () {
             console.log('showing image');
-            const asset = document.getElementById('asset');
+            const asset = document.getElementById('image-asset');
             asset.setAttribute('src', "/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}");
         },
         hideMessages: function () {

views/partials/image.handlebars

@@ -1 +1 @@
-<img id="asset" class="asset"/>
+<img id="image-asset" class="asset"/>

views/partials/video.handlebars

@@ -1,5 +1,5 @@
-<video id="video-player" controls poster="{{claimInfo.thumbnail}}">
-    <source id="asset">
+<video id="video-asset" class="asset" controls poster="{{claimInfo.thumbnail}}">
+    <source>
     <!--fallback-->
     Your browser does not support the <code>video</code> element.
 </video>

views/showLite.handlebars

@@ -1,2 +1,3 @@
-{{> asset }}
-<a class="link--primary fine-print" href="/{{claimInfo.claimId}}/{{claimInfo.name}}">hosted via Spee&lt;h</a>
+<div class="row row--tall flex-container--column flex-container--center-center">
+    {{> asset }}
+</div>