Embedding YouTube video changes font look on eleme

Question

I'm adding a YouTube video to a web page, and it's oddly affecting the existing text on my page. I've narrowed it down to a small example which shows up the problem quite well, at least in Chrome and Safari on Mac:

http://jsfiddle.net/gothick/wjNzf/5/

This is basically a paragraph of text with a video embedded using the current, standard YouTube iframe-based embed below it.

Watch carefully as that page loads, and you'll see the apparent weight of the paragraph of text above the embedded video get lighter when the YouTube embed has finished loading.

The white-on-black look I've chosen shows up the problem quite distinctly, but the "jump to a lighter font" is also there, more subtly, with normal colours.

I can't see any CSS properties changing, and I can't figure out how to override/prevent this change. As far as I can see using webkit's inspection tools, the font style remains the same.

Any ideas how I can fix this? And can other people see it? Starting to think it's something peculiar to my setup...

Here's before and after shots. I grabbed these within a second of each other, one before the video loaded into the page, one after:

Answer 1

Finally found your post on this bizarre issue. It's affecting both the sites I manage, but only in webkit browsers on Mac, AFAIK. Mac Firefox renders the text fine, even in the presence of the embedded video.

These pages have video embeds and show the problem clearly. You can probably watch the text switch from robust (normal) rendering to "dim" - no subpixel font smoothing.

http://makanipower.com/why-airborne-wind/

http://andrewnimmo.com/mistersaturdaynight/

For comparison check out these pages without videos:

http://makanipower.com/faq/

http://andrewnimmo.com/mistersaturdaynight/2009/09/justin-carter-2/

Just contributing to the problem exhibit, since I have no clue why it's happening. I've seen people proposing jquery conflicts but on andrewnimmo.com i've killed ALL javascript in the head, disabling my js menus for example.

These are both Wordpress installs fwiw.

Curiously the problem is not replicated on the live version of the second site,

http://mistersaturdaynight.com/

which uses a different wp theme (coraline). And also, has some javascript. Fonts are smoothed perfectly.

The two sites with problems are running on very similar WP theme code, but I can't find anything suspicious, outside the js that I've eliminated on one of them without solving the problem.

Answer 2

Use the following:

-webkit-font-smoothing : antialiased; 

This fixed it for me.