diff --git a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css b/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css
index 07c6071f..350f1ccd 100644
--- a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css
+++ b/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css
@@ -5,7 +5,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 0.85);
     display: none;
     flex-direction: column;
     justify-content: center;
@@ -17,6 +17,35 @@
     transition: opacity 0.2s ease-out;
 }
 
+.autoplay-close-button {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: white;
+    transition: all 0.2s ease;
+    padding: 0;
+    z-index: 10;
+}
+
+.autoplay-close-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: scale(1.1);
+}
+
+.autoplay-close-button:active {
+    transform: scale(0.95);
+}
+
 .vjs-autoplay-countdown-overlay.autoplay-countdown-show {
     opacity: 1;
 }
@@ -110,6 +139,7 @@
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-top: 4px;
+    display: inline-block;
 }
 
 .autoplay-cancel-button:hover {
@@ -119,8 +149,32 @@
     transform: translateY(-1px);
 }
 
+/* Desktop - Both buttons visible */
+@media (min-width: 768px) {
+    .autoplay-close-button {
+        display: flex !important;
+    }
+    
+    .autoplay-cancel-button {
+        display: inline-block !important;
+    }
+}
+
 /* Mobile Responsive */
 @media (max-width: 767px) {
+    .autoplay-close-button {
+        display: flex !important;
+        top: 12px;
+        right: 12px;
+        width: 36px;
+        height: 36px;
+    }
+
+    .autoplay-close-button svg {
+        width: 20px;
+        height: 20px;
+    }
+
     .autoplay-countdown-content {
         gap: 8px;
         max-width: 280px;
@@ -151,13 +205,24 @@
     }
 
     .autoplay-cancel-button {
-        padding: 8px 20px;
-        font-size: 12px;
-        margin-top: 4px;
+        display: none;
     }
 }
 
 @media (max-width: 480px) {
+    .autoplay-close-button {
+        display: flex !important;
+        top: 10px;
+        right: 10px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .autoplay-close-button svg {
+        width: 18px;
+        height: 18px;
+    }
+
     .autoplay-countdown-content {
         gap: 6px;
         max-width: 260px;
@@ -188,8 +253,6 @@
     }
 
     .autoplay-cancel-button {
-        padding: 6px 16px;
-        font-size: 11px;
-        margin-top: 2px;
+        display: none;
     }
 }
diff --git a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.js b/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.js
index feb9c40a..bd7fd70a 100644
--- a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.js
+++ b/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.js
@@ -34,6 +34,12 @@ class AutoplayCountdownOverlay extends Component {
         const nextVideoTitle = this.nextVideoData?.title || 'Next Video';
 
         overlay.innerHTML = `
+            <button class="autoplay-close-button" aria-label="Cancel autoplay" title="Cancel">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
             <div class="autoplay-countdown-content">
                 <div class="countdown-label">Up Next</div>
                 
@@ -61,6 +67,7 @@ class AutoplayCountdownOverlay extends Component {
         // Add event listeners with explicit binding
         const circularCountdown = overlay.querySelector('.circular-countdown');
         const cancelButton = overlay.querySelector('.autoplay-cancel-button');
+        const closeButton = overlay.querySelector('.autoplay-close-button');
 
         if (circularCountdown) {
             circularCountdown.addEventListener('click', (e) => {
@@ -76,6 +83,13 @@ class AutoplayCountdownOverlay extends Component {
             });
         }
 
+        if (closeButton) {
+            closeButton.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.handleCancel();
+            });
+        }
+
         // Initially hide the overlay
         overlay.style.display = 'none';