--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -165,16 +165,21 @@
             &positionAndDuration.nameFormat;
           </span>
           <div anonid="controlBarSpacer" class="controlBarSpacer" hidden="true" role="none"></div>
           <button anonid="muteButton"
                   class="muteButton"
                   mutelabel="&muteButton.muteLabel;"
                   unmutelabel="&muteButton.unmuteLabel;"/>
           <div anonid="volumeStack" class="volumeStack progressContainer" role="none">
+            <div class="progressBackgroundBar stackItem" role="none">
+              <div class="progressStack" role="none">
+                <meter anonid="volumeBackground" class="volumeBackground" value="0" max="100" role="none"></meter>
+              </div>
+            </div>
             <input type="range" anonid="volumeControl" class="volumeControl" min="0" max="100" step="1"/>
           </div>
           <button anonid="closedCaptionButton" class="closedCaptionButton"/>
           <button anonid="fullscreenButton"
                   class="fullscreenButton"
                   enterfullscreenlabel="&fullscreenButton.enterfullscreenlabel;"
                   exitfullscreenlabel="&fullscreenButton.exitfullscreenlabel;"/>
         </div>
@@ -463,16 +468,17 @@
         this.setVolume(volume / 100);
       },
 
       updateVolumeControls() {
         var volume = this.video.muted ? 0 : this.video.volume;
         var volumePercentage = Math.round(volume * 100);
         this.updateMuteButtonState();
         this.volumeControl.value = volumePercentage;
+        this.volumeBackground.value = volumePercentage;
       },
 
       handleEvent(aEvent) {
         this.log("Got media event ----> " + aEvent.type);
 
         // If the binding is detached (or has been replaced by a
         // newer instance of the binding), nuke our event-listeners.
         if (this.videocontrols.randomID != this.randomID) {
@@ -1672,16 +1678,17 @@
         this.controlsContainer    = document.getAnonymousElementByAttribute(binding, "anonid", "controlsContainer");
         this.statusIcon    = document.getAnonymousElementByAttribute(binding, "anonid", "statusIcon");
         this.controlBar    = document.getAnonymousElementByAttribute(binding, "anonid", "controlBar");
         this.playButton    = document.getAnonymousElementByAttribute(binding, "anonid", "playButton");
         this.controlBarSpacer    = document.getAnonymousElementByAttribute(binding, "anonid", "controlBarSpacer");
         this.muteButton    = document.getAnonymousElementByAttribute(binding, "anonid", "muteButton");
         this.volumeStack   = document.getAnonymousElementByAttribute(binding, "anonid", "volumeStack");
         this.volumeControl = document.getAnonymousElementByAttribute(binding, "anonid", "volumeControl");
+        this.volumeBackground = document.getAnonymousElementByAttribute(binding, "anonid", "volumeBackground");
         this.progressBar   = document.getAnonymousElementByAttribute(binding, "anonid", "progressBar");
         this.bufferBar     = document.getAnonymousElementByAttribute(binding, "anonid", "bufferBar");
         this.scrubberStack = document.getAnonymousElementByAttribute(binding, "anonid", "scrubberStack");
         this.scrubber      = document.getAnonymousElementByAttribute(binding, "anonid", "scrubber");
         this.durationLabel = document.getAnonymousElementByAttribute(binding, "anonid", "durationLabel");
         this.positionLabel = document.getAnonymousElementByAttribute(binding, "anonid", "positionLabel");
         this.positionDurationBox   = document.getAnonymousElementByAttribute(binding, "anonid", "positionDurationBox");
         this.statusOverlay = document.getAnonymousElementByAttribute(binding, "anonid", "statusOverlay");

--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -8,16 +8,20 @@
 video > xul|videocontrols,
 audio > xul|videocontrols {
   writing-mode: horizontal-tb;
   width: 100%;
   height: 100%;
   display: inline-block;
 }
 
+.controlsContainer {
+  --thumb-size: 13px;
+}
+
 .controlsContainer [hidden="true"],
 .controlBar[hidden] {
   display: none;
 }
 
 .controlBar[size="hidden"] {
   display: none;
 }
@@ -176,18 +180,18 @@ audio > xul|videocontrols {
 }
 
 .controlBarSpacer {
   flex-grow: 1;
 }
 
 .volumeControl::-moz-range-thumb,
 .scrubber::-moz-range-thumb {
-  height: 13px;
-  width: 13px;
+  height: var(--thumb-size);
+  width: var(--thumb-size);
   border: none;
   border-radius: 50%;
   background-color: #ffffff;
   filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.65));
 }
 
 .volumeControl::-moz-focus-outer,
 .scrubber::-moz-focus-outer {
@@ -198,17 +202,17 @@ audio > xul|videocontrols {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
 .progressStack {
   position: relative;
-  width: 100%;
+  width: calc(100% - var(--thumb-size) / 2);
   height: 5px;
 }
 
 .scrubberStack {
   min-width: 48px;
   flex-basis: 48px;
   flex-grow: 2;
   flex-shrink: 0;
@@ -264,44 +268,35 @@ audio > xul|videocontrols {
 }
 
 .scrubber:active::-moz-range-thumb,
 .volumeControl:active::-moz-range-thumb {
   background-color: #2d89e6;
 }
 
 .scrubber::-moz-range-track,
-.scrubber::-moz-range-progress {
+.scrubber::-moz-range-progress,
+.volumeControl::-moz-range-track,
+.volumeControl::-moz-range-progress {
   background-color: transparent;
 }
 
-.volumeControl::-moz-range-progress,
-.volumeControl::-moz-range-track {
-  height: 5px;
-  border-radius: 2.5px;
-}
-
-.volumeControl::-moz-range-progress {
-  background-color: #ffffff;
-}
-
-.volumeControl::-moz-range-track {
-  background-color: rgba(0,0,0,0.7);
-}
-
-
 .bufferBar::-moz-progress-bar {
   background-color: rgba(255,255,255,0.3);
   border-radius: 2.5px;
 }
 
 .progressBar::-moz-progress-bar {
   background-color: #00b6f0;
 }
 
+.volumeBackground::-moz-meter-bar {
+  background-color: #ffffff;
+}
+
 .textTrackList {
   position: absolute;
   right: 5px;
   bottom: 45px;
   max-width: 80%;
   border: 1px solid #000000;
   border-radius: 2.5px;
   padding: 5px 0;