Always Display Firefox Video controlBar

Question

I am trying to find some userChrome.css to cause Firefox HTML5 video tags to always display the control bar:

Looking at the source code I see that the video controls are defined in videocontrols.xml, and it seems like the CSS file is videocontrols.css

So I've added variations on the following to my userChrome.css but I am not seeing any effect on the controlBar display.

.controlsContainer [hidden="true"],
.controlBar[hidden] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.controlBar[size="hidden"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.controlBar:not([immediate]) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.controlBar[fadeout] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

Any suggestions for why this doesn't seem to be applying to the interface?

This question isn't about an addon to firefox, but a built in feature. I tried moving the styles to userContent.css and that had no effect either after restarting Firefox. Any other suggestions?

I've tried adding the red style to userChrome.css, and the blue one to userContent.css and there was no sign of either when viewing an HTML5 video tag:

/* userChrome.css */
#videoControls .controlBar,
.controlBar,
.controlBar * {
    color: red !important;
    background-color: red !important;
    border: 1px solid red !important;
    outline: 1px solid red !important;
}

/* userContent.css */
#videoControls .controlBar,
.controlBar,
.controlBar * {
    color: blue !important;
    background-color: blue !important;
    border: 1px solid blue !important;
    outline: 1px solid blue !important;
}

Answer 1

As this thread demonstrates, utilization of:

// ==UserScript==
// @name         HTML5 video controls
// @namespace    http://tampermonkey.net/
// @version      0.1
// @include      http://*
// @include      https://*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  function addVideoControls(videoNode) {
    videoNode.setAttribute("controls", "");
    console.log("*** Enabled HTML 5 video controls for", videoNode);
  }

  for (let el of document.getElementsByTagName("video")) {
    addVideoControls(el);
  }

  const observer = new MutationObserver(mutations => {
    for (let i = 0, mLen = mutations.length; i < mLen; ++i) {
      let mutation = mutations[i];
      if (mutation.type === "childList") {
        for (let j = 0, aLen = mutation.addedNodes.length; j < aLen; ++j) {
          let addedNode = mutation.addedNodes[j];
          if (addedNode.nodeType === 1 && addedNode.tagName === "VIDEO") {
            addVideoControls(addedNode);
          }
        }
      }
    }
  });

  observer.observe(document.body, {childList: true, subtree: true});
})();

...via Greasemonkey should be adequate (or via Tampermonkey, because as "http://stackoverflow.com/questions/47317983" demonstrates, the scripts should be interchangeable).