--- a/browser/base/content/test/static/browser_parsable_css.js
+++ b/browser/base/content/test/static/browser_parsable_css.js
@@ -109,16 +109,18 @@ let propNameWhitelist = [
   {propName: "--theme-codemirror-gutter-background",
    isFromDevTools: true},
   // Bug 1442300
   {propName: "--in-content-category-background",
    isFromDevTools: false},
   // These custom properties are retrieved directly from CSSOM
   // in videocontrols.xml to get pre-defined style instead of computed
   // dimensions, which is why they are not referenced by CSS.
+  {propName: "--clickToPlay-width",
+   isFromDevTools: false},
   {propName: "--muteButton-width",
    isFromDevTools: false},
   {propName: "--closedCaptionButton-width",
    isFromDevTools: false},
   {propName: "--fullscreenButton-width",
    isFromDevTools: false},
   {propName: "--durationSpan-width",
    isFromDevTools: false},

--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -2166,26 +2166,27 @@
     </handler>
   </handlers>
 
 </binding>
 
 <binding id="noControls">
 
   <resources>
-    <stylesheet src="chrome://global/content/bindings/videocontrols.css"/>
-    <stylesheet src="chrome://global/skin/media/videocontrols.css"/>
+    <stylesheet src="chrome://global/skin/media/videocontrols-html.css"/>
   </resources>
 
-  <xbl:content xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="mediaControlsFrame">
-    <vbox flex="1" class="statusOverlay" hidden="true">
-      <box flex="1">
-        <box class="clickToPlay" flex="1"/>
-      </box>
-    </vbox>
+  <xbl:content xmlns="http://www.w3.org/1999/xhtml" class="mediaControlsFrame">
+    <div anonid="controlsContainer" class="controlsContainer" role="none" hidden="true">
+      <div class="controlsOverlay stackItem">
+        <div class="controlsSpacerStack">
+          <div anonid="clickToPlay" class="clickToPlay"></div>
+        </div>
+      </div>
+    </div>
   </xbl:content>
 
   <implementation>
   <constructor>
     <![CDATA[
     this.randomID = 0;
     this.Utils = {
       randomID: 0,
@@ -2254,18 +2255,18 @@
         this.video.play();
       },
 
       init(binding) {
         this.binding = binding;
         this.randomID = Math.random();
         this.binding.randomID = this.randomID;
         this.video = binding.parentNode;
-        this.clickToPlay       = document.getAnonymousElementByAttribute(binding, "class", "clickToPlay");
-        this.noControlsOverlay = document.getAnonymousElementByAttribute(binding, "class", "statusOverlay");
+        this.clickToPlay       = document.getAnonymousElementByAttribute(binding, "anonid", "clickToPlay");
+        this.noControlsOverlay = document.getAnonymousElementByAttribute(binding, "anonid", "controlsContainer");
 
         let self = this;
         function addListener(elem, eventName, func) {
           let boundFunc = func.bind(self);
           self.controlListeners.push({ item: elem, event: eventName, func: boundFunc });
           elem.addEventListener(eventName, boundFunc, { mozSystemGroup: true });
         }
         addListener(this.clickToPlay, "click", this.clickToPlayClickHandler);

--- a/toolkit/themes/mobile/jar.mn
+++ b/toolkit/themes/mobile/jar.mn
@@ -36,16 +36,19 @@ toolkit.jar:
    skin/classic/global/media/error.png                     (global/media/error.png)
    skin/classic/global/media/throbber.png                  (global/media/throbber.png)
    skin/classic/global/media/videoClickToPlayButton.svg    (global/media/videoClickToPlayButton.svg)
    skin/classic/global/media/TopLevelImageDocument.css     (global/media/TopLevelImageDocument.css)
    skin/classic/global/media/TopLevelVideoDocument.css     (global/media/TopLevelVideoDocument.css)
    skin/classic/global/media/imagedoc-lightnoise.png       (global/media/imagedoc-lightnoise.png)
    skin/classic/global/media/imagedoc-darknoise.png        (global/media/imagedoc-darknoise.png)
 
+* skin/classic/global/media/videocontrols-html.css         (../shared/media/videocontrols.css)
+  skin/classic/global/media/playButton.svg                 (../shared/media/playButton.svg)
+
 % skin mozapps classic/1.0 %skin/classic/mozapps/
    skin/classic/mozapps/plugins/pluginProblem.css          (mozapps/plugins/pluginProblem.css)
 
    skin/classic/mozapps/plugins/contentPluginActivate.png  (mozapps/plugins/contentPluginActivate.png)
    skin/classic/mozapps/plugins/contentPluginBlocked.png   (mozapps/plugins/contentPluginBlocked.png)
    skin/classic/mozapps/plugins/contentPluginClose.png     (mozapps/plugins/contentPluginClose.png)
    skin/classic/mozapps/plugins/contentPluginCrashed.png   (mozapps/plugins/contentPluginCrashed.png)
    skin/classic/mozapps/plugins/contentPluginStripe.png    (mozapps/plugins/contentPluginStripe.png)

--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -7,22 +7,34 @@
 
 video > xul|videocontrols,
 audio > xul|videocontrols {
   writing-mode: horizontal-tb;
   width: 100%;
   height: 100%;
   display: inline-block;
   overflow: hidden;
+
+  direction: ltr;
+  /* Prevent unwanted style inheritance. See bug 554717. */
+  text-align: left;
+  list-style-image: none !important;
+  font: normal normal normal 100%/normal sans-serif !important;
+  text-decoration: none !important;
+}
+
+.controlsContainer {
+  --clickToPlay-size: 48px;
 }
 
 /* Some CSS custom properties defined here are referenced by videocontrols.xml in JavaScript */
 .controlBar {
-  --clickToPlay-width: 48px;
-  --clickToPlay-height: var(--clickToPlay-width);
+  /* Do not delete: these variables are accessed by JavaScript directly.
+     see videocontrols.xml and search for |-width|. */
+  --clickToPlay-width: var(--clickToPlay-size);
   --playButton-width: 30px;
   --playButton-height: var(--playButton-width);
   --scrubberStack-width: 64px;
   --muteButton-width: 30px;
   --volumeStack-width: 48px;
   --closedCaptionButton-width: 30px;
   --fullscreenButton-width: 30px;
 
@@ -371,18 +383,18 @@ audio > xul|videocontrols {
   min-width: 70px;
   min-height: 60px;
   background: url(chrome://global/skin/media/error.png) no-repeat center;
   background-size: contain;
 }
 
 /* Overlay Play button */
 .clickToPlay {
-  min-width: var(--clickToPlay-width);
-  min-height: var(--clickToPlay-height);
+  min-width: var(--clickToPlay-size);
+  min-height: var(--clickToPlay-size);
   border-radius: 50%;
   background-image: url(chrome://global/skin/media/playButton.svg);
   background-repeat: no-repeat;
   background-position: 54% 50%;
   background-size: 40% 40%;
   background-color: #1a1a1a;
   -moz-context-properties: fill;
   fill: #ffffff;