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"
+            <div id="overlay-play" class="btn" aria-label="Play/Pause">
-                ><svg
+                <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", () => {

src/pages/video-player.astro

@@ -5,7 +5,8 @@ import ComponentLayout from "../layouts/ComponentLayout.astro";
 
 <ComponentLayout>
     <VideoPlayer
-        videoUrl="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4"
+        videoUrl="https://stream-middleware.workroot.in/recording/live/t05Pbqv01N/2025-10-02_12-37-12-157172.mp4"
+        poster="https://stream-middleware.workroot.in/thumbnail/live/t05Pbqv01N/2025-10-02_12-37-12-157172.mp4.jpg"
         videoType="video/mp4"
         class="wr:w-[500px]"
         muted={false}