HTML5 video background color not matching background color of website -- in some browsers, sometimes

Question

I have a video that the client wants to sit "seamlessly" in the website. The background HEX color of the video matches the HEX background color of the website, and renders as such in some browsers, some versions, some of the time?

What is most curious is Chrome renders the background of the video differently, until you open the color picker. Then they suddenly match. To be clear, it only fixes it once I open the color picker, not the debugger (read: this not a repainting issue).

Firefox renders differently when I first navigate to the site, but if I hit cmd+r, it becomes perfectly seamless.

Take a look at the screenshots - they say more than I can with words.

I'm in the process of convincing the client to change to white background for the video as that will certainly "fix" it, but I'm super curious as to what /why this is happening.

Any insights from you wizards out there?

---

Codepen: http://codepen.io/anon/pen/zrJVpX

<div class="background" style="background-color: #e1dcd8; width: 100%; height: 100%;">
<div class="video-container">
    <video id="video" poster="" width="90%" height="auto" preload="" controls style="margin-left: 5%; margin-top: 5%;">
      <source id="mp4" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.mp4" type="video/mp4">
      <source id="webm" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.webm" type="video/webm">
      <source id="ogg" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.ogv" type="video/ogg">
      We're sorry. This video is unable to be played on your browser.
      </video>
    </div>
</div>

Answer 1

It seems like it might be fundamental to how the browsers render video, and not an easy CSS/HTML fix. Your question sounds similar to this question. I am betting the answer lies in some combination of rendering engines and colorspace differences, which may mean there is no good way to fix it across browsers.

On firefox, you could try fiddling with color management settings to see if that changes the behavior. This won't fix the problem, but it could help explain it. In the URL/search bar, enter "about:config". It should take you to an options page. Another search bar will appear rendered in the page, enter "gfx.color_management.mode". That option can take values 0,1,2. Try switching them up and reloading the page (may need to restart firefox) to see if you can get a consistent difference. It's possible it won't make any difference if the color is not being managed in the first place though.

Similarly, you could try disabling hardware-accelerated video decode in chrome. Enter "chrome://flags" in the chrome URL/search bar, then find the flag "Disable hardware-accelerated video decode". Change whatever value it is, restart chrome, and check the colors again.

Neither of these are solutions I realize, this may have been better served as a comment, but I don't have the rep for that yet.