diff --git a/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-overlay-visibility.service.ts b/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-overlay-visibility.service.ts
index 6467706e8..e5d5b3e40 100644
--- a/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-overlay-visibility.service.ts
+++ b/libs/ui/playback/src/lib/embedded-mpv-player/embedded-mpv-overlay-visibility.service.ts
@@ -1,29 +1,40 @@
 import { Injectable, inject, signal } from '@angular/core';
 import { OverlayContainer } from '@angular/cdk/overlay';
+import { MatDialog } from '@angular/material/dialog';
 
 @Injectable({ providedIn: 'root' })
 export class EmbeddedMpvOverlayVisibilityService {
     readonly overlayActive = signal(false);
 
     private readonly overlayContainer = inject(OverlayContainer);
+    private readonly dialog = inject(MatDialog);
     private observer: MutationObserver | null = null;
 
     constructor() {
-        if (typeof MutationObserver === 'undefined') {
-            return;
+        this.dialog.afterOpened.subscribe(() => this.recompute());
+        this.dialog.afterAllClosed.subscribe(() => this.recompute());
+
+        if (typeof MutationObserver !== 'undefined') {
+            const container = this.overlayContainer.getContainerElement();
+            this.observer = new MutationObserver(() => this.recompute());
+            this.observer.observe(container, {
+                childList: true,
+                subtree: true,
+            });
         }
 
-        const container = this.overlayContainer.getContainerElement();
-        this.observer = new MutationObserver(() => this.recompute(container));
-        this.observer.observe(container, { childList: true, subtree: true });
-        this.recompute(container);
+        this.recompute();
     }
 
-    private recompute(container: HTMLElement): void {
-        const hasBackdrop =
-            container.querySelector('.cdk-overlay-backdrop') !== null;
-        if (this.overlayActive() !== hasBackdrop) {
-            this.overlayActive.set(hasBackdrop);
+    private recompute(): void {
+        const dialogOpen = this.dialog.openDialogs.length > 0;
+        const backdropPresent =
+            this.overlayContainer
+                .getContainerElement()
+                .querySelector('.cdk-overlay-backdrop') !== null;
+        const next = dialogOpen || backdropPresent;
+        if (this.overlayActive() !== next) {
+            this.overlayActive.set(next);
         }
     }
 }