Question

I’m having a problem with youtube video embedding;

In some places on my site (like news etc.) video is normally displayed and can be watched, while in others (forum topics mainly) it flickers whenever I mouseover it (making a new HTTP request to YouTube, as I can see in Firebug).

It definitelly has something to do with CSS rendering; when I disable JS nothing changes but disabling CSS causes it to work properly.

Firefox version: 3.6.12
Flash version: 10.1.82.76

The code I’m using for embedding:

<object type="application/x-shockwave-flash" width="390" height="293" data="http://www.youtube.com/v/pIxVoDNbujM?ft=18">
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <param name="wmode" value="transparent"></param>
    <param name="movie" value="http://www.youtube.com/v/pIxVoDNbujM?ft=18"></param>
</object>

(to keep it W3 HTML valid, flickering happens with normal embed code as well).

You can see it ‘in action’ here:
Youtube embed code flickering in Firefox

Edit: OMG, it works properly when I’m logged out… Now nothing is clear to me as CSS is the same for users and guests, there are just few minor differences in markup…

Answer 1

It was because of the elements that followed the embed (same level children of the parent div), there was a non-block-level element (small) with class clearfix (doing a clear:both), which was wrongly interpreted by Firefox.

Putting a display:block; on .clearfix did the trick, it’s working perfectly now.