From 59cba4803b4600b609da611096f4747000673249 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Mon, 6 Oct 2025 18:29:16 +0300
Subject: [PATCH] Add dark background for embed video player

Introduces a utility to set a black background and remove margins/padding for embed contexts in main.jsx, improving visual consistency for embedded video players. Also updates embed.css to enforce a black background for the embed page.
---
 frontend-tools/video-js/src/main.jsx         | 33 +++++++++++++++++++-
 frontend-tools/video-js/src/styles/embed.css |  5 +++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/frontend-tools/video-js/src/main.jsx b/frontend-tools/video-js/src/main.jsx
index a8450efc..e725345c 100644
--- a/frontend-tools/video-js/src/main.jsx
+++ b/frontend-tools/video-js/src/main.jsx
@@ -3,6 +3,30 @@ import { createRoot } from 'react-dom/client';
 
 import VideoJS from './VideoJS.jsx';
 
+// Function to set dark background for embed contexts
+const setEmbedBodyBackground = () => {
+    const embedContainer = document.getElementById('video-js-root-embed');
+    const pageEmbed = document.getElementById('page-embed');
+
+    // Check if we're in embed mode
+    if (embedContainer || pageEmbed) {
+        // Store original background to restore later if needed
+        if (!document.body.dataset.originalBackground) {
+            document.body.dataset.originalBackground = document.body.style.backgroundColor || '';
+        }
+
+        // Set dark background for embed
+        document.body.style.backgroundColor = '#000';
+        document.documentElement.style.backgroundColor = '#000';
+
+        // Also set margin and padding to 0 for seamless embed
+        document.body.style.margin = '0';
+        document.body.style.padding = '0';
+        document.documentElement.style.margin = '0';
+        document.documentElement.style.padding = '0';
+    }
+};
+
 // Mount the components when the DOM is ready
 const mountComponents = () => {
     // Mount main video player
@@ -25,11 +49,18 @@ const mountComponents = () => {
                 <VideoJS videoId="video-embed" />
             </StrictMode>
         );
+
+        // Set dark background when embed player is mounted
+        setEmbedBodyBackground();
     }
+
+    // Also check for embed context even without mounting
+    setEmbedBodyBackground();
 };
 
-// Expose the mounting function globally for manual triggering
+// Expose functions globally for manual triggering
 window.triggerVideoJSMount = mountComponents;
+window.setVideoJSEmbedBackground = setEmbedBodyBackground;
 
 // Listen for custom events to trigger mounting
 document.addEventListener('triggerVideoJSMount', () => {
diff --git a/frontend-tools/video-js/src/styles/embed.css b/frontend-tools/video-js/src/styles/embed.css
index b202c3b5..a9d5bdca 100644
--- a/frontend-tools/video-js/src/styles/embed.css
+++ b/frontend-tools/video-js/src/styles/embed.css
@@ -1,6 +1,11 @@
 /* ===== EMBED PLAYER STYLES ===== */
 /* YouTube-style embed player with fullscreen poster */
 
+/* Black background for embed page to eliminate white space */
+#page-embed {
+    background-color: #000 !important;
+}
+
 /* Fullscreen poster image - fills entire iframe */
 #page-embed .video-js-root-embed .video-js .vjs-poster {
     position: absolute !important;