diff --git a/toolkit/content/tests/widgets/test_videocontrols_error.html b/toolkit/content/tests/widgets/test_videocontrols_error.html
index b8e7ac76c3cb..c5f71d0aca7f 100644
--- a/toolkit/content/tests/widgets/test_videocontrols_error.html
+++ b/toolkit/content/tests/widgets/test_videocontrols_error.html
@@ -32,7 +32,9 @@
       video.addEventListener("loadedmetadata", () => SimpleTest.executeSoon(resolve));
     });
 
-    await SimpleTest.promiseWaitForCondition(() => statusOverlay.hasAttribute("fadeout") || statusOverlay.hidden,
+    // Wait for the fade out transition to complete in case the throbber
+    // shows up on slower platforms.
+    await SimpleTest.promiseWaitForCondition(() => statusOverlay.hidden,
       "statusOverlay should not present without error");
 
     ok(!statusOverlay.hasAttribute("error"), "statusOverlay should not in error state");
@@ -47,7 +49,7 @@
       video.addEventListener("error", () => SimpleTest.executeSoon(resolve));
     });
 
-    ok(!statusOverlay.hidden && !statusOverlay.hasAttribute("fadeout"), `statusOverlay should show when ${errorType}`);
+    ok(!statusOverlay.hidden, `statusOverlay should show when ${errorType}`);
     is(statusOverlay.getAttribute("error"), errorType, `statusOverlay should have correct error state: ${errorType}`);
     is(statusIcon.getAttribute("type"), "error", `should show error icon when ${errorType}`);
   });
diff --git a/toolkit/content/widgets/videocontrols.xml b/toolkit/content/widgets/videocontrols.xml
index 81683375e307..3faab592211b 100644
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1020,6 +1020,22 @@
         }
       },
 
+      onTransitionEnd(event) {
+        // Ignore events for things other than opacity changes.
+        if (event.propertyName != "opacity") {
+          return;
+        }
+
+        var element = event.originalTarget;
+
+        // Nothing to do when a fade *in* finishes.
+        if (!element.hasAttribute("fadeout")) {
+          return;
+        }
+
+        element.hidden = true;
+      },
+
       _triggeredByControls: false,
 
       startPlay() {
@@ -1763,6 +1779,7 @@
         }
 
         addListener(this.videocontrols, "resizevideocontrols", this.adjustControlSize);
+        addListener(this.videocontrols, "transitionend", this.onTransitionEnd);
         addListener(this.controlBar, "transitionend", this.onControlBarTransitioned);
         // See comment at onFullscreenChange on bug 718107.
         // addListener(this.video.ownerDocument, "fullscreenchange", this.onFullscreenChange);
diff --git a/toolkit/themes/shared/media/videocontrols.css b/toolkit/themes/shared/media/videocontrols.css
index b01e384fbdac..7b84b09028c8 100644
--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -443,7 +443,6 @@ audio > xul|videocontrols {
 
 .controlsSpacerStack:hover > .clickToPlay[fadeout] {
   opacity: 0;
-  visibility: hidden;
 }
 
 .controlBar[fullscreen-unavailable] .fullscreenButton {
@@ -451,37 +450,43 @@ audio > xul|videocontrols {
 }
 
 /* CSS Transitions */
-.clickToPlay:not([immediate]) {
-  transition-property: transform, opacity, visibility;
-  transition-duration: 400ms, 400ms, 400ms;
+.clickToPlay {
+  transition-property: transform, opacity;
+  transition-duration: 400ms, 400ms;
+}
+
+.controlsSpacer[fadeout] {
+  opacity: 0;
 }
 
 .clickToPlay[fadeout] {
   transform: scale(3);
   opacity: 0;
-  visibility: hidden;
 }
 
+.clickToPlay[fadeout][immediate] {
+  transition-property: opacity, background-size;
+  transition-duration: 0s, 0s;
+}
 .controlBar:not([immediate]) {
-  transition-property: opacity, visibility;
-  transition-duration: 200ms, 200ms;
+  transition-property: opacity;
+  transition-duration: 200ms;
 }
-
 .controlBar[fadeout] {
   opacity: 0;
-  visibility: hidden;
 }
-
+.volumeStack:not([immediate]) {
+  transition-property: opacity, margin-top;
+  transition-duration: 200ms, 200ms;
+}
 .statusOverlay:not([immediate]) {
-  transition-property: opacity, visibility;
-  transition-duration: 300ms, 300ms;
-  transition-delay: 750ms, 750ms;
+  transition-property: opacity;
+  transition-duration: 300ms;
+  transition-delay: 750ms;
 }
-
 .statusOverlay[fadeout],
 .statusOverlay[error] + .controlsOverlay > .controlsSpacerStack {
   opacity: 0;
-  visibility: hidden;
 }
 
 /* Error description formatting */