Question

Possible Duplicate:
Cross-browser window resize event – JavaScript / jQuery
Jquery flash of unstyled content (IE only)

I have a div (#container) where on a click event I swap out an image and replace it with a YouTube video:

$("#feature_content").click(function(){
                var iframe = "<iframe />";

                var url = "http://www.youtube.com/embedlink";

                 $(iframe, {
                    name: 'videoframe',
                    id: 'videoframe',
                    src: url,
                    width: '600',
                    height: '335',
                    frameborder: 0,
                    allowfullscreen: true
                }).appendTo(this);

                $(this).find('img').fadeOut(function() { $(this).remove();});

    });

However, I am getting a flash of unstyled content (the iframe) BELOW the div before the video starts playing.

This is happening in IE and Chrome, but not Firefox

Answer 1

Guessing somewhat, as we don’t have a demonstration of the bad behaviour, but I think your problem is that the image is still taking up the space that’s supposed to be occupied by the iframe.

You should use CSS position: absolute attributes to ensure that they both have the same relative position within the parent div.