diff --git a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css b/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css
index 7db41839..34c33fde 100644
--- a/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css
+++ b/frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css
@@ -6,7 +6,7 @@
     left: 0;
     width: 100%;
     height: calc(100% - 46px);
-    background: rgba(0, 0, 0, 0.7);
+    background: #000000;
     display: none;
     flex-direction: column;
     justify-content: center;
@@ -16,6 +16,30 @@
     z-index: 4;
 }
 
+/* Hide poster image when video ends and end screen is shown */
+.video-js.vjs-ended .vjs-poster {
+    display: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+}
+
+/* Make control bar and seekbar background black when video ends */
+.video-js.vjs-ended .vjs-control-bar {
+    background: #000000 !important;
+    background-color: #000000 !important;
+    background-image: none !important;
+}
+
+.video-js.vjs-ended .vjs-progress-control {
+    background: #000000 !important;
+    background-color: #000000 !important;
+}
+
+/* Also ensure the gradient overlay is black when ended */
+.video-js.vjs-ended::after {
+    background: linear-gradient(transparent, #000000) !important;
+}
+
 .vjs-related-videos-title {
     color: white;
     font-size: 24px;