add video preview

src/Site/BlockLayout/PanoramaViewer.php

@@ -73,6 +73,7 @@ class PanoramaViewer extends AbstractBlockLayout
 
 		$urls = [];
     $media_types = [];
+    $thumbnails = [];
     $panorama_type = $block->dataValue('panorama_type');
 		static $id = 0;
 
@@ -88,6 +89,7 @@ class PanoramaViewer extends AbstractBlockLayout
         } elseif (strpos($mediaType, 'image/') !== false){
           array_push($urls, $media->originalUrl());
         }
+        array_push($thumbnails, $media->thumbnailUrls());
 			}
 		}
     $width = $block->dataValue('width');
@@ -101,6 +103,7 @@ class PanoramaViewer extends AbstractBlockLayout
 			'urls' => $urls,
       'id' => 'pv-' . ++$id,
       'mediaTypes' => $media_types,
+      'thumbnails' => $thumbnails,
 		]);
 	}
 }

view/common/block-layout/panorama-viewer.phtml

@@ -1,4 +1,4 @@
-<div style="position:relative;">
+<div class="pannemmul-wrap" style="position:relative;">
 
 	<?php
 		$this->headLink()->appendStylesheet($this->assetUrl('vendor/pannellum/pannellum.css',
@@ -28,13 +28,12 @@
 		}
 	</style>
 
-<?php if ($panorama_type == "video") { ?>
-
+	<div class="pannellum-wrap">
+	<?php if ($panorama_type == "video") { ?>
 		<video 	id="<?= $id ?>"
 						class="video-js vjs-default-skin vjs-big-play-centered"
 		  			controls preload="none"
-					style="width:<?= $width ?>px; height: <?= $height ?>px;"
-	  			poster="/images/video/jfk-poster.jpg"
+		  			poster="<?= $thumbnails[0]['medium'] ?>"
 						crossorigin="anonymous">
 					<?php for($i = 0; $i < count($urls); ++$i) { ?>
 						<source src="<?= $urls[$i] ?>" type="<?= $mediaTypes[$i] ?>"/>
@@ -45,15 +44,11 @@
 		       target="_blank">supports HTML5 video</a>
 		   </p>
 		</video>
-
-<?php } else { ?>
-
-	<div class="pannellum">
+	<?php } else { ?>
 		<div id="<?= $id ?>" class="panorama-viewer"></div>
+	<?php } ?>
 	</div>
 
-<?php } ?>
-
 	<script>
 
 	<?php if ($panorama_type == "equirectangular") { ?>