HTML5 Video Background Color Not Matching Background Color of Website - in Some Browsers, Sometimes

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

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.

Website should have same background color as video

Could you please try the following:

function BrowserDetection() {
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
                     $(body).css("background-color":"grey");   
                    }
    }

You can probably find the right color HEX-Code, make sure this line is the last in line in your .js file and make your sure your .js file is loaded in after your .css file so that the cod overwrites your css if the browser is safari

source: http://forums.asp.net/t/1965754.aspx?Determine+the+browser+using+Javascript+JQuery

if the code above doesn't work the following may:

if ( $.browser.webkit ) {
    $(body).css("background-color":"grey"); 
  }

however the code above is deprecated in jquery 1.9 and above.

Related Topics