HTML5 Video causes weird glitch in CSS :hover transition, doesn't work well cross-browser

I've got my main page here: http://thenozzle.net/

The logo at the top of the page is a sprite, switches between top and bottom to give the glow effect. This is done with css transition and :hover pseudo element.

However, I recently added the 'projekktor' HMTL5 video player. It works really well, but if you start the video, then hover of the logo, it glitches out when you mouse-over.

Also, Google Chrome doesn't play the video served from ea.com The Battlefield 3 clip. Chrome won't play it, these two things are driving me nuts. COuld they be related? What am I doing wrong?

Projekktor homepage: http://www.projekktor开发者_如何学运维.com/

It performs differently in every browser. Horribly slow in Firefox, but it plays. Perfect in Safari, CHrome it won't play at all, but Safari has the glitchy logo. Any ideas?

I fixed it. I removed 1 of the two anchors, and removed the headlink text-indent property from the div, and put it on the single anchor. Weird problem, weird solution. For future reference, don't try to text-indent text that buried more then one level deep, on your rollover it will jump back and forth spiratically.

<div title="The Nozzle" id="headerlogo">
    <div title="The Nozzle" id="logo1"></div>
    <a style="text-indent:-9999px" title="The Nozzle" href="http://thenozzle.net/"><div title="The Nozzle" id="logo2"></div>The Nozzle</a>
</div>