--- a/dom/media/webvtt/vtt.jsm
+++ b/dom/media/webvtt/vtt.jsm
@@ -23,16 +23,18 @@ this.EXPORTED_SYMBOLS = ["WebVTT"];
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
 
 var Cu = Components.utils;
 Cu.import('resource://gre/modules/Services.jsm');
+const { require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
+const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
 
 (function(global) {
 
   var _objCreate = Object.create || (function() {
     function F() {}
     return function(o) {
       if (arguments.length !== 1) {
         throw new Error('Object.create shim only accepts one parameter.');
@@ -377,21 +379,22 @@ Cu.import('resource://gre/modules/Servic
       if (f[1]) {
         f = f[1].slice(0, 3).padEnd(3, "0");
       } else {
         f = "000";
       }
       return hours + ':' + minutes + ':' + seconds + '.' + f;
     }
 
-    var isFirefox = (/firefox/i.test(window.navigator.userAgent));
+    var isFirefoxSupportPseudo = (/firefox/i.test(window.navigator.userAgent))
+          && Services.prefs.getBoolPref("media.webvtt.pseudo.enabled");
     var root;
     if (bReturnFrag) {
       root = window.document.createDocumentFragment();
-    } else if (isFirefox) {
+    } else if (isFirefoxSupportPseudo) {
       root = window.document.createElement("div", {pseudo: "::cue"});
     } else {
       root = window.document.createElement("div");
     }
     var current = root,
         t,
         tagStack = [];
 
@@ -462,23 +465,27 @@ Cu.import('resource://gre/modules/Servic
       }
     }
   };
 
   StyleBox.prototype.formatStyle = function(val, unit) {
     return val === 0 ? 0 : val + unit;
   };
 
+  XPCOMUtils.defineLazyPreferenceGetter(StyleBox.prototype, "supportPseudo",
+                                        "media.webvtt.pseudo.enabled", false);
+
   // Constructs the computed display state of the cue (a div). Places the div
   // into the overlay which should be a block level element (usually a div).
   function CueStyleBox(window, cue, styleOptions) {
     var isIE8 = (typeof navigator !== "undefined") &&
       (/MSIE\s8\.0/).test(navigator.userAgent);
 
-    var isFirefox = (/firefox/i.test(window.navigator.userAgent));
+    var isFirefoxSupportPseudo = (/firefox/i.test(window.navigator.userAgent))
+          && this.supportPseudo;
     var color = "rgba(255, 255, 255, 1)";
     var backgroundColor = "rgba(0, 0, 0, 0.8)";
 
     if (isIE8) {
       color = "rgb(255, 255, 255)";
       backgroundColor = "rgb(0, 0, 0)";
     }
 
@@ -490,17 +497,17 @@ Cu.import('resource://gre/modules/Servic
     this.cueDiv = parseContent(window, cue.text, false);
     var styles = {
       color: color,
       backgroundColor: backgroundColor,
       display: "inline",
       font: styleOptions.font,
       whiteSpace: "pre-line",
     };
-    if (isFirefox) {
+    if (isFirefoxSupportPseudo) {
       delete styles.color;
       delete styles.backgroundColor;
       delete styles.font;
       delete styles.whiteSpace;
     }
 
     if (!isIE8) {
       styles.writingMode = cue.vertical === "" ? "horizontal-tb"

--- a/modules/libpref/init/all.js
+++ b/modules/libpref/init/all.js
@@ -538,16 +538,19 @@ pref("media.getusermedia.screensharing.a
 pref("media.getusermedia.screensharing.allowed_domains", "mozilla.github.io,webex.com,*.webex.com,ciscospark.com,*.ciscospark.com,projectsquared.com,*.projectsquared.com,*.room.co,room.co,beta.talky.io,talky.io,*.clearslide.com,appear.in,*.appear.in,tokbox.com,*.tokbox.com,*.sso.francetelecom.fr,*.si.francetelecom.fr,*.sso.infra.ftgroup,*.multimedia-conference.orange-business.com,*.espacecollaboration.orange-business.com,free.gotomeeting.com,g2m.me,*.g2m.me,*.mypurecloud.com,*.mypurecloud.com.au,spreed.me,*.spreed.me,*.spreed.com,air.mozilla.org,*.circuit.com,*.yourcircuit.com,circuit.siemens.com,yourcircuit.siemens.com,circuitsandbox.net,*.unify.com,tandi.circuitsandbox.net,*.ericsson.net,*.cct.ericsson.net,*.opentok.com,*.conf.meetecho.com,meet.jit.si,*.meet.jit.si,web.stage.speakeasyapp.net,web.speakeasyapp.net,*.hipchat.me,*.beta-wspbx.com,*.wspbx.com,*.unifiedcloudit.com,*.smartboxuc.com,*.smartbox-uc.com,*.panterranetworks.com,pexipdemo.com,*.pexipdemo.com,pex.me,*.pex.me,*.rd.pexip.com,1click.io,*.1click.io,*.fuze.com,*.fuzemeeting.com,*.thinkingphones.com,gotomeeting.com,*.gotomeeting.com,gotowebinar.com,*.gotowebinar.com,gototraining.com,*.gototraining.com,citrix.com,*.citrix.com,expertcity.com,*.expertcity.com,citrixonline.com,*.citrixonline.com,g2m.me,*.g2m.me,gotomeet.me,*.gotomeet.me,gotomeet.at,*.gotomeet.at,miriadaxdes.miriadax.net,certificacion.miriadax.net,miriadax.net,*.wire.com,sylaps.com,*.sylaps.com,bluejeans.com,*.bluejeans.com,*.a.bluejeans.com,*.bbcollab.com");
 #endif
 
 pref("media.getusermedia.audiocapture.enabled", false);
 
 // TextTrack WebVTT Region extension support.
 pref("media.webvtt.regions.enabled", false);
 
+// WebVTT pseudo element and class support.
+pref("media.webvtt.pseudo.enabled", true);
+
 // AudioTrack and VideoTrack support
 pref("media.track.enabled", false);
 
 // Whether to enable MediaSource support.
 pref("media.mediasource.enabled", true);
 
 pref("media.mediasource.mp4.enabled", true);