Ich habe ein Video, dass der Kunde "nahtlos" in der Website sitzen möchte. Die HEX-Hintergrundfarbe des Videos stimmt mit der HEX-Hintergrundfarbe der Website überein und wird in einigen Browsern, einigen Versionen und manchmal auch als solche wiedergegebe

Am merkwürdigsten ist, dass Chrome den Hintergrund des Videos anders rendert, bis Sie den Farbwähler öffnen. Dann passen sie plötzlich zusammen. Das Problem wird nur behoben, wenn ich den Farbwähler öffne, nicht den Debugger (sprich: dies ist kein Problem beim Neulackieren).

Firefox rendert anders, wenn ich zum ersten Mal zur Site navigiere, aber wenn ich cmd + r drücke, wird es vollkommen nahtlos.

Sehen Sie sich die Screenshots an - sie sagen mehr als ich mit Worten sagen kann.

Ich bin gerade dabei, den Kunden davon zu überzeugen, den weißen Hintergrund für das Video zu verwenden, da dies das Problem mit Sicherheit beheben wird, aber ich bin sehr gespannt, was / warum dies geschieht.

Haben Sie Einblicke von Zauberern da draußen?

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

<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>