HTML5 Background Video - Makes Other Content Pixelated / Grainy

I am trying to make a website with a video background using HTML5's video tag. I also tried using a jQuery plugin (http://plugi开发者_开发知识库ns.jquery.com/project/videoBG). I got the video to load and work properly, but every time it makes other content appear grainy/pixelated. Is there anyway to place items on top of the video background and not have them appear grainy / pixelated?

You can see the pages I've created. The code is fairly simple, so I won't include it here.

With Video: http://createinform.com/test4.html Without Video: http://createinform.com/test3.html

You'll notice that the logo and text look different from page to page, but they are using the save CSS rules. Thank you in advance!

Cheers, Evan

This seems to be a known issue with Chrome. I tried the same two pages in Firefox (5.0), IE (9), and Opera (10), and I couldn't tell the difference in the rendering.

EDIT: I also tried the two pages in Safari (5.0.1/Windows), and the rendering looks even worse there. So, perhaps it's a webkit issue.

A part the Chrome bug, your logo image is bigger than it appears, and is scaled down via CSS. Using a correctly sized image would remove any logo issue.

The text below renders fine in both version BTW (chrome 14.0.797.0 m)