--- a/toolkit/themes/shared/media/pauseButton.svg
+++ b/toolkit/themes/shared/media/pauseButton.svg
@@ -1,36 +1,6 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 18 18">
-  <style>
-    use:not(:target) {
-      display: none;
-    }
-    use {
-      fill: #ffffff;
-    }
-    use[id$="-hover"] {
-      fill: #48a0f7;
-    }
-    use[id$="-active"] {
-      fill: #2d89e6;
-    }
-    use[id$="-focus"] {
-      fill: #48a0f7;
-    }
-    use[id$="-disabled"] {
-      fill: #ffffff;
-    }
-  </style>
-
-
-  <symbol id="pause-shape">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.002,1.953C5.172,1.953,4.5,2.626,4.5,3.455v11.08
+<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill" d="M6.002,1.953C5.172,1.953,4.5,2.626,4.5,3.455v11.08
         c0,0.83,0.672,1.502,1.502,1.502c0.829,0,1.502-0.672,1.502-1.502V3.455C7.504,2.626,6.831,1.953,6.002,1.953z M12,1.953
         c-0.828,0-1.5,0.672-1.5,1.5v11.094c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5V3.453C13.5,2.625,12.828,1.953,12,1.953z"/>
-  </symbol>
+</svg>
 
-  <use id="pause" xlink:href="#pause-shape"/>
-  <use id="pause-hover" xlink:href="#pause-shape"/>
-  <use id="pause-active" xlink:href="#pause-shape"/>
-  <use id="pause-focus" xlink:href="#pause-shape"/>
-  <use id="pause-disalbed" xlink:href="#pause-shape"/>
-</svg>

--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -91,23 +91,25 @@ audio > xul|videocontrols {
   background-color: transparent;
   background-repeat: no-repeat;
   background-position: center;
   background-origin: content-box;
   background-clip: content-box;
 }
 
 .playButton {
-  background-image: url(chrome://global/skin/media/pauseButton.svg#pause);
+  background-image: url(chrome://global/skin/media/pauseButton.svg);
+  -moz-context-properties: fill;
+  fill: #ffffff;
 }
 .playButton:hover {
-  background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover);
+  fill: #48a0f7;
 }
 .playButton:hover:active {
-  background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active);
+  fill: #2d89e6;
 }
 .playButton[paused] {
   background-image: url(chrome://global/skin/media/playButton.svg#play);
 }
 .playButton[paused]:hover {
   background-image: url(chrome://global/skin/media/playButton.svg#play-hover);
 }
 .playButton[paused]:hover:active {