Updated Video PLayer Component

src/components/VideoPlayer.astro

@@ -9,6 +9,7 @@ interface Props extends HTMLAttributes<"div"> {
     muted?: boolean;
     volume?: number;
     overlayInfo?: string;
+    poster?: string;
 }
 
 const {
@@ -19,6 +20,7 @@ const {
     muted = false,
     volume = 0.75,
     overlayInfo,
+    poster = "",
 } = Astro.props;
 ---
 
@@ -30,6 +32,7 @@ const {
             playsinline
             autoplay={autoPlay}
             muted
+            poster={poster}
         >
             <source src={videoUrl} type={videoType} />
             Your browser does not support the video tag.
@@ -60,8 +63,8 @@ const {
         </div>
 
         <div id="overlay">
-            <button id="overlay-play" class="btn" aria-label="Play/Pause"
-                ><svg
+            <div id="overlay-play" class="btn" aria-label="Play/Pause">
+                <svg
                     width="36"
                     height="36"
                     viewBox="0 0 24 24"
@@ -74,7 +77,7 @@ const {
                     >
                     </path>
                 </svg>
-            </button>
+            </div>
         </div>
 
         <div
@@ -197,6 +200,8 @@ const {
         overflow: hidden;
         background: #000;
         box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
+        display: flex;
+        align-items: center;
     }
 
     .video-wrap {
@@ -538,7 +543,7 @@ const {
 
         video.addEventListener("click", togglePlayPause);
         overlay.addEventListener("click", togglePlayPause);
-        overlayPlay.addEventListener("click", togglePlayPause);
+        //overlayPlay.addEventListener("click", togglePlayPause);
         playPauseBtn.addEventListener("click", togglePlayPause);
 
         video.addEventListener("play", () => {