I am adding a YouTube video to a web page, and this has a weird effect on existing text on my page. I narrowed it down to a small example that shows 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 built-in iframe.
Keep track of how this page loads, and you will see that the apparent weight of a paragraph of text above the embedded video becomes easier when YouTube embedding has completed the download.
The white-to-black look I selected shows the problem quite clearly, but the “jump to a lighter font” is also more subtle, with the usual colors.
I don't see any changes to CSS properties, and I can't figure out how to override / prevent this change. As far as I can see with webkit validation tools, the font style remains the same.
Any ideas how I can fix this? And can other people see it? Starting to think of something special for my installation ...
Here before and after the shots. I grabbed them one second apart, one before the video being uploaded to the page, one after:
source
share