--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -140,50 +140,57 @@
         <span class="errorLabel" anonid="errorSrcNotSupported">&error.srcNotSupported;</span>
         <span class="errorLabel" anonid="errorNoSource">&error.noSource2;</span>
         <span class="errorLabel" anonid="errorGeneric">&error.generic;</span>
       </div>
 
       <div anonid="controlsOverlay" class="controlsOverlay stackItem">
         <div class="controlsSpacerStack" aria-hideen="true">
           <div anonid="controlsSpacer" class="controlsSpacer stackItem" role="none"></div>
-          <div anonid="clickToPlay" class="clickToPlay" hidden="true"></div>
+          <div anonid="clickToPlay" class="clickToPlay" hidden="true" minwidth="48"></div>
         </div>
         <div anonid="controlBar" class="controlBar" hidden="true">
           <button anonid="playButton"
                   class="playButton"
                   playlabel="&playButton.playLabel;"
                   pauselabel="&playButton.pauseLabel;"
+                  minwidth="30"
                   tabindex="-1"/>
-          <div anonid="scrubberStack" class="scrubberStack progressContainer" role="none">
+          <div anonid="scrubberStack" class="scrubberStack progressContainer" minwidth="64" role="none">
             <div class="progressBackgroundBar stackItem" role="none">
               <div class="progressStack" role="none">
                 <progress anonid="bufferBar" class="bufferBar" value="0" max="100" tabindex="-1"></progress>
                 <progress anonid="progressBar" class="progressBar" value="0" max="100" tabindex="-1"></progress>
               </div>
             </div>
             <input type="range" anonid="scrubber" class="scrubber" tabindex="-1" mozinputrangeignorepreventdefault="true" />
           </div>
-          <span anonid="positionLabel" class="positionLabel" role="presentation"></span>
-          <span anonid="durationLabel" class="durationLabel" role="presentation"></span>
-          <span anonid="positionDurationBox" class="positionDurationBox" aria-hidden="true">
+          <span anonid="positionLabel" class="positionLabel"  minwidth="0" role="presentation"></span>
+          <span anonid="durationLabel" class="durationLabel"  minwidth="0" role="presentation"></span>
+          <span anonid="positionDurationBox" class="positionDurationBox" aria-hidden="true" minwidth="75">
             &positionAndDuration.nameFormat;
           </span>
-          <div anonid="controlBarSpacer" class="controlBarSpacer" hidden="true" role="none"></div>
+          <div anonid="controlBarSpacer"
+               class="controlBarSpacer"
+               hidden="true"
+               minwidth="0"
+               role="none"></div>
           <button anonid="muteButton"
                   class="muteButton"
                   mutelabel="&muteButton.muteLabel;"
                   unmutelabel="&muteButton.unmuteLabel;"
+                  minwidth="30"
                   tabindex="-1"/>
-          <div anonid="volumeStack" class="volumeStack progressContainer" role="none">
+          <div anonid="volumeStack" minwidth="58" class="volumeStack progressContainer" role="none">
             <input type="range" anonid="volumeControl" class="volumeControl" min="0" max="100" step="1" tabindex="-1" mozinputrangeignorepreventdefault="true" />
           </div>
-          <button anonid="closedCaptionButton" class="closedCaptionButton"/>
+          <button anonid="closedCaptionButton" minwidth="30" class="closedCaptionButton"/>
           <button anonid="fullscreenButton"
                   class="fullscreenButton"
+                  minwidth="30"
                   enterfullscreenlabel="&fullscreenButton.enterfullscreenlabel;"
                   exitfullscreenlabel="&fullscreenButton.exitfullscreenlabel;"/>
         </div>
         <div anonid="textTrackList" class="textTrackList" hidden="true" offlabel="&closedCaption.off;"></div>
       </div>
     </div>
   </xbl:content>
 
@@ -372,17 +379,17 @@
 
         for (let control of this.layoutControls) {
           if (!control) {
             break;
           }
 
           Object.defineProperties(control, {
             minWidth: {
-              value: control.clientWidth,
+              value: parseInt(control.getAttribute("minwidth"), 10),
               writable: true
             },
             isAdjustableControl: {
               value: true
             },
             isWanted: {
               value: true,
               writable: true
@@ -1804,16 +1811,17 @@
 
         this.layoutControls = [
           ...this.controlBar.children,
           this.durationSpan,
           this.controlBar,
           this.clickToPlay
         ];
 
+        this.durationSpan.setAttribute("minwidth", "48");
 
         // XXX controlsContainer is a desktop only element. To determine whether
         // isTouchControls or not during the whole initialization process, get
         // this state overridden here.
         this.videocontrols.isTouchControls = !this.controlsContainer;
         this.isAudioOnly = (this.video instanceof HTMLAudioElement);
         this.setupInitialState();
         this.setupNewLoadState();