diff --git a/src/browser/base/content/zen-styles/zen-media-controls.css b/src/browser/base/content/zen-styles/zen-media-controls.css
index c6093ff10..ebb90f944 100644
--- a/src/browser/base/content/zen-styles/zen-media-controls.css
+++ b/src/browser/base/content/zen-styles/zen-media-controls.css
@@ -83,7 +83,9 @@
       height: 0;
       opacity: 0;
       padding: 0;
+      margin-right: -10%;
       transform: translateX(-20px);
+      transition: margin 0.15s ease-in-out;
     }
 
     @container (min-width: 185px) {
diff --git a/src/browser/base/zen-components/ZenMediaController.mjs b/src/browser/base/zen-components/ZenMediaController.mjs
index 456fbb3e5..e41ca0dd2 100644
--- a/src/browser/base/zen-components/ZenMediaController.mjs
+++ b/src/browser/base/zen-components/ZenMediaController.mjs
@@ -39,7 +39,7 @@ class ZenMediaController {
             .then(() => {
               this.mediaControlBar.setAttribute('hidden', 'true');
             });
-        } else {
+        } else if (this.mediaControlBar.hasAttribute('hidden')) {
           this.mediaControlBar.removeAttribute('hidden');
           window.requestAnimationFrame(() => {
             this.mediaControlBar.style.height =