From 89cda52027337db920c07cf677a532393ca90159 Mon Sep 17 00:00:00 2001 From: Leopere Date: Mon, 10 Mar 2025 12:25:16 -0400 Subject: [PATCH] Fix video player initialization and improve video container styling --- .../public/static/css/custom-video.css | 18 +++++---- .../public/static/js/videojs-player.min.js | 38 ++++++++++++++++++- docker/showerloop/public/videos/video1.html | 15 +++++++- docker/showerloop/public/videos/video2.html | 15 +++++++- docker/showerloop/public/videos/video3.html | 15 +++++++- 5 files changed, 90 insertions(+), 11 deletions(-) diff --git a/docker/showerloop/public/static/css/custom-video.css b/docker/showerloop/public/static/css/custom-video.css index 4c55fc7..304a190 100644 --- a/docker/showerloop/public/static/css/custom-video.css +++ b/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; diff --git a/docker/showerloop/public/static/js/videojs-player.min.js b/docker/showerloop/public/static/js/videojs-player.min.js index 7c7ca56..52eace0 100644 --- a/docker/showerloop/public/static/js/videojs-player.min.js +++ b/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)})}); \ No newline at end of file +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 +}); \ No newline at end of file diff --git a/docker/showerloop/public/videos/video1.html b/docker/showerloop/public/videos/video1.html index 30af6fa..518958b 100644 --- a/docker/showerloop/public/videos/video1.html +++ b/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 @@
-
-
-