Fix video player initialization and improve video container styling

docker/showerloop/public/static/css/custom-video.css

@@ -10,10 +10,19 @@
 /* Ensure the video-js player is properly contained */
 .video-js {
   width: 100%;
-  height: auto;
+  height: 0 !important;
+  padding-top: 56.25% !important; /* 16:9 aspect ratio */
   /* Ensure controls are within the container */
   position: relative;
-  aspect-ratio: 16/9;
+}
+
+/* Position the video element correctly */
+.video-js .vjs-tech {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 /* Fix control bar positioning */
@@ -25,11 +34,6 @@
 
 /* Additional responsive adjustments */
 @media (max-width: 768px) {
-  .video-js {
-    /* Ensure the video fits on smaller screens */
-    max-height: 300px;
-  }
-  
   .video-container {
     /* More bottom space on mobile */
     margin-bottom: 15px;

docker/showerloop/public/static/js/videojs-player.min.js

@@ -1 +1,37 @@
-document.addEventListener("DOMContentLoaded",function(){const e=document.querySelectorAll("video:not(.video-js)");e.length&&e.forEach(function(e){const t=e.id||"video-"+Math.floor(1e6*Math.random());e.id=t,e.classList.add("video-js"),e.classList.add("vjs-big-play-centered"),videojs(t,{controls:!0,autoplay:!1,preload:"auto"})});const t=document.querySelectorAll("video.video-js");t.forEach(function(e){const t=e.id;t&&!videojs.getPlayers()[t]&&videojs(t)})}); 
+document.addEventListener("DOMContentLoaded", function() {
+  // Initialize non-video-js videos
+  const nonVideoJsVideos = document.querySelectorAll("video:not(.video-js)");
+  if (nonVideoJsVideos.length) {
+    nonVideoJsVideos.forEach(function(video) {
+      const videoId = video.id || "video-" + Math.floor(Math.random() * 1000000);
+      video.id = videoId;
+      video.classList.add("video-js");
+      video.classList.add("vjs-big-play-centered");
+      // Check if player is already initialized
+      if (!videojs.getPlayers()[videoId]) {
+        videojs(videoId, {
+          controls: true,
+          autoplay: false,
+          preload: "auto"
+        });
+      }
+    });
+  }
+
+  // Initialize video-js videos that don't have data-setup attribute
+  const videoJsVideos = document.querySelectorAll("video.video-js:not([data-setup])");
+  videoJsVideos.forEach(function(video) {
+    const videoId = video.id;
+    // Check if player is already initialized
+    if (videoId && !videojs.getPlayers()[videoId]) {
+      videojs(videoId, {
+        controls: true,
+        autoplay: false,
+        preload: "auto"
+      });
+    }
+  });
+
+  // Don't re-initialize videos that already have data-setup attribute
+  // as they will be automatically initialized by Video.js
+}); 

docker/showerloop/public/videos/video1.html

@@ -35,6 +35,19 @@
             max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
+            position: relative;
+        }
+        .video-js {
+            width: 100%;
+            height: 0 !important;
+            padding-top: 56.25% !important; /* 16:9 aspect ratio */
+        }
+        .video-js .vjs-tech {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
         }
         .video-title {
             text-align: center;
@@ -90,7 +103,7 @@
                 </div>
                 
                 <div class="video-container">
-                    <video id="video1" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video1.webp" data-setup="{}">
+                    <video id="video1" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video1.webp">
                         <source src="/static/videos/hls/video1/master.m3u8" type="application/x-mpegurl">
                         <source src="/static/videos/video1.mp4" type="video/mp4">
                         <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>

docker/showerloop/public/videos/video2.html

@@ -35,6 +35,19 @@
             max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
+            position: relative;
+        }
+        .video-js {
+            width: 100%;
+            height: 0 !important;
+            padding-top: 56.25% !important; /* 16:9 aspect ratio */
+        }
+        .video-js .vjs-tech {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
         }
         .video-title {
             text-align: center;
@@ -90,7 +103,7 @@
                 </div>
                 
                 <div class="video-container">
-                    <video id="video2" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video2.webp" data-setup="{}">
+                    <video id="video2" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video2.webp">
                         <source src="/static/videos/hls/video2/master.m3u8" type="application/x-mpegurl">
                         <source src="/static/videos/video2.mp4" type="video/mp4">
                         <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>

docker/showerloop/public/videos/video3.html

@@ -35,6 +35,19 @@
             max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
+            position: relative;
+        }
+        .video-js {
+            width: 100%;
+            height: 0 !important;
+            padding-top: 56.25% !important; /* 16:9 aspect ratio */
+        }
+        .video-js .vjs-tech {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
         }
         .video-title {
             text-align: center;
@@ -90,7 +103,7 @@
                 </div>
                 
                 <div class="video-container">
-                    <video id="video3" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video3.webp" data-setup="{}">
+                    <video id="video3" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="auto" poster="/static/videos/posters/video3.webp">
                         <source src="/static/videos/hls/video3/master.m3u8" type="application/x-mpegurl">
                         <source src="/static/videos/video3.mp4" type="video/mp4">
                         <p>To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>