HTML5 video background color not matching background color of website -- in some browsers, sometimes : <p>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?</p>

<p>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). </p>

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

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

<p>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.</p>

<p>Any insights from you wizards out there?</p>

<hr>

<p>Codepen: <a href="http://codepen.io/anon/pen/zrJVpX" rel="noreferrer">http://codepen.io/anon/pen/zrJVpX</a></p>

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

<p><a href="https://i.stack.imgur.com/vuME6.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/vuME6.jpg" alt="Screenshots of the different browsers."></a></p>
