--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1457,17 +1457,17 @@
                 _durationLabelWidth : 0,
                 _muteButtonWidth : 0,
                 _volumeControlWidth : 0,
                 _closedCaptionButtonWidth : 0,
                 _fullscreenButtonWidth : 0,
                 _controlBarHeight : 0,
                 _overlayPlayButtonHeight : 64,
                 _overlayPlayButtonWidth : 64,
-                _volumeStackMarginEnd : 8,
+                _controlBarPaddingEnd: 8,
                 adjustControlSize : function adjustControlSize() {
                     let doc = this.video.ownerDocument;
 
                     // The scrubber has |flex=1|, therefore |minScrubberWidth|
                     // was generated by empirical testing.
                     let minScrubberWidth = 25;
                     let minWidthAllControls = this._playButtonWidth +
                                               minScrubberWidth +
@@ -1475,17 +1475,17 @@
                                               this._muteButtonWidth +
                                               this._volumeControlWidth +
                                               this._closedCaptionButtonWidth +
                                               this._fullscreenButtonWidth;
 
                     let isFullscreenUnavailable = this.controlBar.hasAttribute("fullscreen-unavailable");
                     if (isFullscreenUnavailable) {
                         // When the fullscreen button is hidden we add margin-end to the volume stack.
-                        minWidthAllControls -= this._fullscreenButtonWidth - this._volumeStackMarginEnd;
+                        minWidthAllControls -= this._fullscreenButtonWidth - this._controlBarPaddingEnd;
                     }
 
                     let minHeightForControlBar = this._controlBarHeight;
                     let minWidthOnlyPlayPause = this._playButtonWidth + this._muteButtonWidth;
 
                     let isAudioOnly = this.isAudioOnly;
                     let videoHeight = isAudioOnly ? minHeightForControlBar : this.video.clientHeight;
                     let videoWidth = isAudioOnly ? minWidthAllControls : this.video.clientWidth;

--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -63,16 +63,17 @@
 }
 
 .muteButton[noAudio] + .volumeStack {
   display: none;
 }
 
 .closedCaptionButton {
   background-image: url(chrome://global/skin/media/closeCaptionButton.png);
+  background-position: 4px;
 }
 
 .closedCaptionButton[enabled] {
   opacity: 1;
 }
 
 .closedCaptionButton[hidden] {
   display: none;
@@ -137,19 +138,19 @@
   color: white;
   background-color: black;
 }
 
 .textTrackList > html|*.textTrackItem:hover {
   background-color: rgba(0,0,0,.55);
 }
 
-.controlBar[fullscreen-unavailable] > .volumeStack {
+.controlBar[fullscreen-unavailable] {
   /* This value is duplicated in the videocontrols.xml adjustControlSize function. */
-  margin-inline-end: 8px;
+  padding-inline-end: 8px;
 }
 
 .volumeControl .scale-thumb {
   min-width: 0;
   opacity: 0;
 }
 
 .durationBox {
@@ -410,18 +411,19 @@ html|table {
   .muteButton[muted] {
     background-image: url(chrome://global/skin/media/unmuteButton@2x.png);
     background-size: 33px 28px;
   }
   .muteButton[noAudio] {
     background-image: url(chrome://global/skin/media/noAudio@2x.png);
     background-size: 33px 28px;
   }
-  .closeCaptionButton {
+  .closedCaptionButton {
     background-image: url(chrome://global/skin/media/closeCaptionButton@2x.png);
+    background-position: 4px;
     background-size: 28px 28px;
   }
   .fullscreenButton {
     background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0);
     background-size: 16px 16px;
   }
   .fullscreenButton[fullscreened] {
     background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32);